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

teretektor · 16 Avril 2015

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 !

loubet · 16 Avril 2015

ce serait plus propre avec un seul preg_match :
preg_match('/iphone|ip[ao]d|android/i',$ua)

FortTrafic · 16 Avril 2015

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

dudo · 16 Avril 2015

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;
}

teretektor · 16 Avril 2015

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)

frenchhorn · 16 Avril 2015

$_SERVER['HTTP_USER_AGENT'] n'est pas une bonne solution. il vaut mieux un responsive avec les mediaquery

zeb · 16 Avril 2015

frenchhorn a dit:
mediaquery

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