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

 

Partagez cet article Partager sur Twitter Partager sur Facebook Partager sur Linkedin Partager sur Google+ Envoyer par mail

Florian Burnel

Co-Fondateur d’IT-Connect, je souhaite partager mes connaissances et expériences avec vous, et comme la veille techno’ est importante je partage aussi des actus.

florian a publié 1612 articles sur IT-Connect.See all posts by florian

5 réactions sur “Détecter les Smartphones en PHP

  • 10/03/2014 à 22:30
    Permalink

    Oui, mais avc le UserAgent, on ne peut pas différencier s’il s’agit d’une tablette ou d’un smartphone.
    La seule solution pour ça est de rajouter une détection de la résolution d’écran ?

    Répondre
    • 10/03/2014 à 22:44
      Permalink

      Bonjour,

      Effectivement détecter la résolution peut être une solution, il faudrait regarder en détail les chaînes User Agent mais il me semble que certaines portent la mention « Mobile » quand il s’agit d’un smartphone. Lorsqu’il s’agit d’une tablette cette mention n’apparaîtrait pas.

      Répondre
      • 08/05/2014 à 20:13
        Permalink

        Pour les appareils récents (android 4.0+, WP8.x, iOs 6+), à mon sens il est plus efficace d’utiliser les techniques liées au « responsive design », et n’utiliser la détection de l’user-agent que pour des cas très spécifiques. Le travail de conception est certes un peu plus compliqué, mais vu la puissance des appareils même « bas de gamme », pas la peine de multiplier plus que ça les codes spécifiques.

        Répondre
  • 31/08/2014 à 13:59
    Permalink

    Moi aussi j’utilise cette technique tres utile sauf que sur le user agent de la tablette ya linux et android compris dedans …

    Répondre
  • Ping : TFE | Pearltrees

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *