- Optimisation>Mobile ou PC -
- Publié le : | Modifié le :
Un code en PHP pour sélectionner le fichier .css selon le navigateur client.
Si vous vous êtes penché sur les media-queries, et le casse-tête des définitions existantes, qui sont de plus en plus ressemblantes à celles de nos écrans PC, il existe une astuce pour savoir à quel navigateur vous avez affaire. Et ainsi mieux gérer vos css en fonction du média visé.
La variable $_SERVER['HTTP_USER_AGENT']
L'astuce est simple, ce qui l'est moins sera de collecter les différentes variables, qui permettent de récupérer les différents noms de navigateur pour les mobiles (je me demande même s'il ne serait pas plus simple de récupérer celles pour les navigateurs de PC).Comme vous pourrez le voir après il y en a un certain nombre.
La variable $_SERVER['HTTP_USER_AGENT'] récupère le contenu de l'en-tête User_Agent: de la requête courante, si elle existe. C'est une chaîne qui décrit le client HTML utilisé pour voir la page courante. Par exemple : Mozilla/4.5 [en] (X11; U; Linux 2.2.9 i586).
(Source php.net)
Donc on se sert de cette variable pour la comparer avec une liste de navigateurs pour smartphone, tablette, etc., et en retour on utilise le boléen, avec une condition et on demande à php d'écrire la balise link pour le client visé, en l'occurrence pc ou mobile.
Attention ça va déborder:)
- $user_agent = strtolower($_SERVER['HTTP_USER_AGENT']);
- $pattern = '/(ipad|ipod|iphone|android|opera mini|blackberry|mobile|palm os|palm|hiptop|avantgo|plucker|xiino|blazer|elaine|iris|3g_t|windows ce|opera mobi|windows ce; smartphone;|windows ce; iemobile|mini 9.5|vx1000|lge |m800|e860|u940|ux840|compal|wireless| mobi|ahong|lg380|lgku|lgu900|lg210|lg47|lg920|lg840|lg370|sam-r|mg50|s55|g83|t66|vx400|mk99|d615|d763|el370|sl900|mp500|samu3|samu4|vx10|xda_|samu5|samu6|samu7|samu9|a615|b832|m881|s920|n210|s700|c-810|_h797|mob-x|sk16d|848b|mowser|s580|r800|471x|v120|rim8|c500foma:|160x|x160|480x|x640|t503|w839|i250|sprint|w398samr810|m5252|c7100|mt126|x225|s5330|s820|htil-g1|fly v71|s302|-x113|novarra|k610i|-three|8325rc|8352rc|sanyo|vx54|c888|nx250|n120|mtk |c5588|s710|t880|c5005|i;458x|p404i|s210|c5100|teleca|s940|c500|s590|foma|samsu|vx8|vx9|a1000|_mms|myx|a700|gu1100|bc831|e300|ems100|me701|me702m-three|sd588|s800|8325rc|ac831|mw200|brew |d88|htc\/|htc_touch|355x|m50|km100|d736|p-9521|telco|sl74|ktouch|m4u\/|me702|8325rc|kddi|phone|lg |sonyericsson|samsung|240x|x320|vx10|nokia|sony cmd|motorola|up.browser|up.link|mmp|symbian|smartphone|midp|wap|vodafone|o2|pocket|kindle|psp|treo)/';
- if (preg_match($pattern,$user_agent)==true) echo "<link rel=stylesheet type=text/css href=./mobile.css media=all />\n";
- else echo "<link rel=stylesheet type=text/css href=./screen.css media=all />\n";
La liste devra être mise à jour, mais elle couvre déjà les principaux navigateurs mobiles.
Cette méthode à un inconvénient, puisque je me retrouve avec deux fichiers css, avec tous les problèmes de maintenances que cela peut engendrer et les erreurs aussi. Mais au niveau client cela reste transparent, puisqu'un seul fichier est chargé.
Par contre, l'avantage est ici évident, le fichier pour les mobiles peut être affiné plus profondément. Voir se complexifier selon les désirs.