Détecter les Smartphones en PHP

I. Présentation

Les smartphones sont de plus en plus nombreux et la grandeur des écrans qu'ils embarquent permet d'encourager les utilisateurs à les utiliser pour naviguer sur internet. De ce fait, de nombreux sites web se doivent d'adapter leur design en fonction de la taille de l'écran sur lequel le site s'affiche. Pour cela, on peut utiliser notamment l'attribut "media" en HTML5 pour appliquer certaines propriétés CSS uniquement aux écrans correspondant à certaines résolutions. Toutefois, si l'on inclut ces paramètres dans une feuille CSS à part dédiée à l'affichage sur "petits" écrans, il est inutile de la charger lorsque l'utilisateur se situe sur un PC portable ou de bureau.

En utilisant le PHP, nous allons voir comment charger cette feuille CSS - dédiée aux smartphones - uniquement lorsqu'on se trouve sur Smartphones.

II. L'utilité du 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. Par exemple, lorsque j'accède à un site web depuis mon PC j'envoie les informations suivantes pour la chaîne user agent :

Mozilla/5.0 (Windows NT 6.2; WOW64; rv:22.0) Gecko/20100101 Firefox/22.0

On peut donc voir que j'utilise le navigateur Mozilla Firefox en version 22.0, Windows NT 6.2 qui correspond en fait à Windows 8 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

III. Les User Agent des Smartphones

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

IV. 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é.

// 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 "<LINK rel="stylesheet" type="text/css" href="smartphones.css">"
}

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".