Détecter les terminaux mobiles avec la classe PHP Mobile Detect

phpMobileDetect-Article

C’est un fait, les terminaux mobiles représentent une part de trafic importante et certains estiment d’ailleurs que le trafic généré depuis ce support de navigation dépassera prochainement celui des ordinateurs, ce notamment grâce à l’impatience des internautes. En effet, dans notre société de consommation moderne, nous souhaitons toujours tout, et tout de suite. Le mobile nous permet donc d’obtenir un accès à l’Internet rapide et qui se veut de plus en plus confortable de par la volonté des entreprises et webmasters, qui recherchent à maximiser la compatibilité de leurs sites web sur ces terminaux.

C’est d’une logique imparable. Plus la part de trafic sur un support est conséquente, plus il est important de fournir un service de qualité sur ce support. Autrement, l’expérience utilisateur peut être dégradée, voire nulle en cas d’incompatibilité complète, ce qui fait inévitablement chuter le taux de transformation et/ou la satisfaction de l’utilisateur.

Rendre son site compatible avec les mobiles

Pour répondre à ce besoin de compatibilité, il existe globalement deux méthodes :

  • La conception web adaptative, aussi appelée responsive design.
  • Le développement d’une version mobile, qui peut se faire de deux façons.
    • Via l’adaptation du HTML selon le User-Agent (on peut comparer cela à du cloaking).
    • Via la création de nouvelles URLs, généralement sur un autre domaine, vers lesquelles on redirige l’internaute selon son User-Agent une fois de plus.

Bien que les différentes solutions soient abordées dans cet article, l’objet initial de cet article est la classe PHP Mobile_Detect, qui est utile dans le cas de la seconde solution.

Le responsive design

Radicalement opposée au développement de versions spécifiques pour les appareils mobiles, la conception web adaptative, aussi appelée responsive design, est une configuration dans laquelle la structure HTML employée est commune à tous les terminaux. La différence d’affichage est gérée grâce au langage CSS qui possède des directives permettant de définir des styles en fonction de la résolution de l’écran. On appelle cela les requêtes de média.

L’avantage de cette solution est la centralisation de vos données. Elle évite une démultiplication de vos contenus et une maintenance supplémentaire à ce niveau. Cependant, la différence d’interprétation des navigateurs sur les ordinateurs étant déjà un fardeau compliqué à gérer, la gestion des appareils mobiles en surcouche est techniquement complexe. C’est souvent pour cette raison que les développeurs optent pour le développement d’une version à part pour les mobiles.

Outre cet aspect technique, il existe des types de sites qui ne peuvent pas posséder d’équivalence mobile sur l’ensemble de leurs pages. Il est alors nécessaire de créer une version minimaliste du site, adaptée pour les mobiles.

La détection des terminaux mobiles

La détection des appareils mobiles est utile dans le cadre du développement de sites en version mobile. Le but est d’être capable de détecter du côté serveur le type de support utilisé par l’internaute. Il est alors ainsi possible de définir ce que l’on souhaite lui afficher. A partir de là, il existe deux possibilités dépendantes de la stratégie que l’on souhaite mettre en place :

  • Modifier la structure HTML servie pour les mobinautes.
  • Rediriger les mobinautes vers de nouvelles pages, adaptées aux mobiles.

L’avantage de la première technique est d’éviter de démultiplier les URLs mais elle n’est pas naturelle. En effet, une page n’est pas censée changer structurellement selon le support de navigation. Quant à la seconde, il est mieux de l’utiliser avec un sous-domaine, mais c’est en même temps son principal inconvénient. Pourquoi devrait-on créer de nouvelles URLs pour s’adapter à l’affichage d’un terminal spécifique ?

Pour finir, ces deux solutions possèdent l’inconvénient commun d’être difficiles à maintenir puisque le code et le contenu sont multipliés.

Remarque : L’utilisation de l’en-tête HTTP Vary est recommandée afin de spécifier qu’une page est susceptible de s’afficher différemment selon le support utilisé. Cela permet à la fois d’éviter une mauvaise gestion des caches ordinateur/mobile et d’aider Google à détecter plus rapidement le contenu optimisé pour les appareils mobiles.

Si vous utilisez la première technique, une configuration de votre serveur est nécessaire. Si vous utilisez la seconde technique, alors votre gestionnaire d’URLs est obligé de passer via une redirection. Vous pouvez alors utiliser le code suivant dans le cas où vous utilisez du PHP :

Comment détecter les terminaux mobiles ?

La classe Mobile_Detect

Mobile_Detect est une classe PHP permettant de détecter les appareils mobiles, c’est-à-dire les smartphones et les tablettes. Elle utilise pour se faire les User-Agent et en-têtes HTTP. Pour avoir une idée de sa puissance, je vous invite à vous rendre sur cette page de test, qui affiche les informations relatives à votre terminal. Vous pourrez ainsi voir l’ensemble des fonctions disponibles :

  • Détection des différents modèles et autres marques tels que iPhone, BlackBerry, HTC, …
  • Détection des tablettes iPad, Kindle, Acer, Archos, …
  • Détection des différents systèmes d’exploitation iOS, Android, Windows Phone, …
  • Détection des différents navigateurs tels que FireFox, IE, Safari, Opera, Chrome, …

Utilisation

La classe est très simple d’utilisation pour sa principale fonctionnalité qui est la détection des téléphones et tablettes. Voici un exemple de détection des terminaux mobiles, que l’on peut d’ailleurs coupler à la redirection de l’exemple précédent :

Si toutefois vous souhaitez créer une version pour les téléphones, mais pas pour les tablettes, il suffit de procéder comme suit :

Télécharger la classe Mobile Detect

Pour télécharger la classe Mobile_Detect.php, je vous conseille de vous rendre sur la page GitHub du développeur. Cela vous permettra de récupérer la dernière version tenant compte des dernières évolutions en matière de terminaux mobiles. En effet, les terminaux mobiles du marché évoluent rapidement et une bonne méthode de détection de ce type de terminaux se doit de suivre les nouveautés du marché mobile. C’est d’ailleurs une des forces de cette classe et ce qui fait son succès, son évolutivité grâce à la réactivité du développeur qui la met gratuitement à votre disposition.

Télécharger Mobile_Detect.php

Détecter les terminaux mobiles avec la classe PHP Mobile Detect, 4.0 out of 5 based on 5 ratings

Commentaires

#1
Kévin Pinto

A noter qu’il est possible de tester l’affichage de votre site internet sur mobile en utilisant l’outil “Mobilometre” de Google.

Pour cela, rendez-vous sur le site mobilisezvous.fr.

#2
Luc

Merci bcp pour le partage de cette classe, c’est ce que je cherchai exactement
@ kevin Merci pour l’outil google

#3
Laurant

script très intéressant, je l’ai testé il marche très bien. Merci et bonne journée

#4
Sara

Article intéressant. Merci d’avoir partager ces informations et cette classe

#5
Samir

J’avais besoin d’un tel code pour mon site web, votre classe est interessante. Merci aussi à Kevin pour le site de test. bonne chance tout le monde

#6
totof05

Salut Je ne comprens pas tres bien ci ce code doit etre iuntegré à ma page index.html et ou.
De meme que je ne voi pas bien comment ecrire l ‘adresse du site mobile.
http://www.monsite.fr/m ????
sI vsou pouviez me donner un coup de main ce serais super.
Merci
Chris

#7
alert(‘test’)

trop bien merci

#8
Thomas

Cette classe est vraiment bien foutue, elle gère un grand nombre d’appareils et est hyper simple à mettre en place !
Par contre, c’est dommage qu’elle ne gère pas l’orientation du device ( par exemple avec un $detect->isLandscape() ).

#9
torkium

Concernant l’orientation, on peut le détecter facilement avec des média queries CSS non? Ou même avec du javascript simple avec une comparaison de la largeur et hauteur de la fenêtre.

Réagissez à cet article

Données obligatoires