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

Nouveau WRInaute
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 !
 
WRInaute passionné
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 :)
 
WRInaute impliqué
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;
}
 
Nouveau WRInaute
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)
 
WRInaute accro
frenchhorn a dit:
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
 
Discussions similaires
Haut