Messages: 2

Enregistré le: 8 Sep 2010

Message le Jeu Avr 16, 2015 9:24

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 !
Haut
6 Réponses
Messages: 872

Enregistré le: 19 Fév 2003

Message le Jeu Avr 16, 2015 12:58

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

Enregistré le: 11 Déc 2012

Message le Jeu Avr 16, 2015 14:29

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 :-)
Haut
Messages: 668

Enregistré le: 10 Jan 2004

Message le Jeu Avr 16, 2015 15:28

bj,

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


Code: Tout sélectionner
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;
}
Haut
Messages: 2

Enregistré le: 8 Sep 2010

Message le Jeu Avr 16, 2015 15:51

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)
Haut
Messages: 1195

Enregistré le: 8 Fév 2007

Message le Jeu Avr 16, 2015 16:40

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

Enregistré le: 5 Déc 2004

Message le Jeu Avr 16, 2015 18:16

frenchhorn a écrit: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
Haut