Solution en PHP assez simple pour être "Mobile Friendly"

Discussion dans 'Problèmes de référencement spécifiques à vos sites' créé par teretektor, 16 Avril 2015.

  1. teretektor

    teretektor Nouveau WRInaute

    Inscrit:
    8 Septembre 2010
    Messages:
    2
    J'aime reçus:
    0
    Bonjour

    Je vous propose une solution assez simple que j'ai trouvée pour rendre mon site (www.cvconseils.com) totalement "Mobile Friendly". Je ne prétendrai pas pour autant qu'elle est des plus orthodoxes ou des plus élégantes, techniquement parlant, mais elle a l'avantage de marcher et de bien marcher même ! Je suis passé au vert sur tous les indicateurs de compatibilité Google, c'est dire !

    J'utilise pour cela la variable globale $_SERVER['HTTP_USER_AGENT'] qui renvoie des tas de choses, dont en particulier le type de navigateur et l'OS du client. Il suffit ensuite de faire un test sur des mots clés liés aux OS des portables

    <?php
    $ua = $_SERVER['HTTP_USER_AGENT'];
    if (preg_match('/iphone/i',$ua) || preg_match('/ipad/i',$ua) || preg_match('/ipod/i',$ua) || preg_match('/android/i',$ua) || preg_match('/blackberry/i',$ua) || preg_match('/symb/i',$ua) || preg_match('/phone/i',$ua) || preg_match('/mobile/i',$ua))
    {
    $resolution = 'portable';
    echo '<link type="text/css" href="Includes/Styles/portable.css" rel="stylesheet" />';
    }
    else
    {
    $resolution = 'ordinateur' ;
    echo '<link type="text/css"href="Includes/Styles/page.css" rel="stylesheet" />';
    echo '<script type="text/javascript" src="Includes/Functions/menu.js" defer></script>';
    }
    ?>

    et de choisir la feuille de style et le menu correspondants.

    J'ai choisi ici de stoker le résultat dans la variable $resolution que j'utilise ensuite pour d'autres tests dans le corps de mes pages xhtml qui me permettent de masquer certaines parties du code pour PC, et de les remplacer par d'autres spécifiques et adaptées aux mobiles.

    Par exemple, mon menu déroulant de base en Javascript était trop large pour les portables. Je l'ai donc remplacé par une simple liste fixe que j'affiche en footer des pages mobile. J'ai donc simplifié les choses mais en conservant toutefois l'essentiel et en ne faisant que peu de modifs de structure, tout bien considéré.

    Cela me permet de garder le même code (à quelques adaptations près) et la même URL canonique pour chacune de mes pages.

    Certes, mon site est textuel et se prête bien à cette manip, ce qui ne sera pas le cas de tous le monde.

    Le code ci-dessus est à mettre dans le <head> avant le <body>

    Bon courage !
     
  2. loubet

    loubet WRInaute impliqué

    Inscrit:
    19 Février 2003
    Messages:
    871
    J'aime reçus:
    0
    ce serait plus propre avec un seul preg_match :
    preg_match('/iphone|ip[ao]d|android/i',$ua)
     
  3. FortTrafic

    FortTrafic WRInaute passionné

    Inscrit:
    11 Décembre 2012
    Messages:
    1 440
    J'aime reçus:
    0
    Salut, merci, pour certains de mes sites codés à la main je pense m'en servir, même si je limite la largeur à 960px, apparemment c'est à moi de m'adapter aux mobiles et non à eux de se bouger pour pouvoir afficher 960px de large correctement et lisiblement :)
     
  4. dudo

    dudo WRInaute impliqué

    Inscrit:
    10 Janvier 2004
    Messages:
    640
    J'aime reçus:
    0
    bj,

    Très utile en effet, mais est ce qu'il y moyen d'inclure les écrans TV 480p ?


    Code:
    function isMobile()
    {   
        if(preg_match('/(alcatel|amoi|android|avantgo|blackberry|benq|cell|cricket|docomo|elaine|htc|iemobile|iphone|ipad|ipaq|ipod|j2me|java|midp|mini|mmp|mobi|motorola|nec-|nokia|palm|panasonic|philips|phone|sagem|sharp|sie-|smartphone|sony|symbian|t-mobile|telus|up\.browser|up\.link|vodafone|wap|webos|wireless|xda|xoom|zte)/i', $_SERVER['HTTP_USER_AGENT']))
        return true;
    else
        return false;
    }
    
     
  5. teretektor

    teretektor Nouveau WRInaute

    Inscrit:
    8 Septembre 2010
    Messages:
    2
    J'aime reçus:
    0
    Bon, je dirai qu'il y en a pas ... que ta fonction est exactement la même et qu'elle teste plus de mots clés (ne pas oublier d'y rajouter ceux pour blackberry et iphone que je ne vois pas dans la liste)
     
  6. frenchhorn

    frenchhorn WRInaute passionné

    Inscrit:
    8 Février 2007
    Messages:
    1 186
    J'aime reçus:
    0
    $_SERVER['HTTP_USER_AGENT'] n'est pas une bonne solution. il vaut mieux un responsive avec les mediaquery
     
  7. zeb

    zeb WRInaute accro

    Inscrit:
    5 Décembre 2004
    Messages:
    13 577
    J'aime reçus:
    0
    ne permet pas de faire le distingo entre une télé avec 2m de diagonale et le dernier iphone (1 920×1 080) ... C'est sur que sur une télé la version mobile du site on va bien voir les boutons