1. Quelle utilité ?
Les développeurs sont souvent confrontés au problème d’affichage sur les téléphones mobiles pour leur application ou site Internet. L’utilisation du mobile pour naviguer étant chaque jour de plus en plus grande à travers le monde, l’adaptation du design est primordiale et fera souvent chuté de plusieurs points le taux de rebond pour votre site.
Avec une simple feuille de style et quelques lignes de commandes PHP, vous allez générer l’information suivante : mais quel est la version du navigateur et l’OS utilisés par les visiteurs de mon site web sur leur smartphone.
2.1 User Agent
Dans les requêtes HTTP effectuées depuis un client web, une chaîne user agent est intégrée et elle contient des informations sur votre navigateur ainsi que votre système d’exploitation et c’est justement ce que nous recherchons ! Par exemple, lorsque j’accède à un site web depuis mon PC j’envoie les informations suivantes pour la chaîne user agent :
|
1
|
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:38.0) Gecko/20100101 Firefox/38.0
|
On peut donc voir que j’utilise le navigateur Mozilla Firefox en version 38.0, Windows NT 6.1 qui correspond en fait à Windows 7 ainsi que WOW64 qui signifie que l’application 32 bits fonctionne sur un OS 64 bits (Windows-on-Windows-64-bit).
Pour voir les informations que vous envoyez dans la chaîne User Agent, consultez ce site : UserAgentString
2.2 UserAgent sur smartphone
Bien entendu, sur un smartphone il ne sera pas indiqué “Windows NT 6.2” concernant le système d’exploitation puisqu’il s’agira probablement d’Android, de Symbian, de Windows Phone, d’iOS ou encore de l’OS Blackberry. Voici à quoi peut ressembler la valeur pour l’OS dans une chaîne User Agent sur smartphone :
- Android : Android 4.1.2
- Symbian : SymbianOS ou SymbOS
- Windows Phone : Windows Phone 8.0
- iOS : iPhone ou iPad ou iPod
- Blackberry : BlackBerry
Pour les autres OS qui peuvent être plus rarement utilisés, vous pourrez sûrement trouver des informations les concernant au sein de cette liste : UserAgentList
3. Le code PHP
En PHP, il existe une variable prédéfinie nommée $_SERVER qui permet d’obtenir des informations sur le serveur web mais également de récupérer quelques informations concernant le client qui se connecte, comme son adresse IP et sa chaîne User Agent. Le principe va donc être le suivant : Récupérer la valeur de la chaîne User Agent envoyée par le client, si cette chaîne contient “android”, “blackberry”, etc… alors c’est qu’il s’agit d’un Smartphone donc on chargera le fichier CSS dédié à l’affichage sur ces appareils, sinon il ne sera pas chargé.
|
1
2
3
4
5
6
|
// Chargement du fichier CSS s’il s’agit d’un user agent smartphones
$ua = $_SERVER[‘HTTP_USER_AGENT’];
if (preg_match(‘/iphone/i’,$ua) || preg_match(‘/android/i’,$ua) || preg_match(‘/blackberry/i’,$ua) || preg_match(‘/symb/i’,$ua) || preg_match(‘/ipad/i’,$ua) || preg_match(‘/ipod/i’,$ua) || preg_match(‘/phone/i’,$ua) )
{
echo « <b><LINK rel= »stylesheet » type= »text/css » href= »smartphones.css« ></b> »
}
|
L’expression rationnelle “preg_match” permet de recherche une chaîne de caractères dans une chaîne de caractères de base, autrement dit dans notre cas, on prend la chaîne complète de User Agent et on recherche la présence de “android“, “symb“, “iphone“, etc… Pour voir s’il s’agit d’un Smartphone ou non. Si c’est le cas, on ajoute la ligne permettant de charger la feuille CSS “smartphones.css“.
