Jouer sur l’user agent via une classe php pour détecter les devices

phpMobileDetect-Article

Malgré le fait que nous developer front end, on trouve que jouer avec les user agents nous parait un peu crado du fait que c’est difficile à tester lors du développement, mais avec l’évolution des navigateurs on peut maintenant simuler les user agents.

En général, on utilise JavaScript pour tester les user agent, mais dans certains cas où on est obligé d’utiliser un template spécifique dans chacune des situations par exemple header-mobile.php pour mobile et header-desktop.php pour desktop, l’utilisation de php est donc obligatoire.

Utilisation de la classe php

Mobile Detect est une classe PHP qui va nous aider à détecter les terminaux mobiles, les tablettes et même desktop.
Le but est de tester sur le navigateur utilisé pour détecter un mobile ou une tablette en particulier.

Son utilisation est très simple et se fera comme suit :

Le plus de mobile detect est qu’il largement utilisé par les gros pointures de CMS : Prestashop, Drupal, WordPress

Tester mobile detect et user agent avec Chrome

Google chrome depuis la version 38 permet de tester un large choix de support mobile et tablette (via leur users agent)

L’activation de l’inspecteur d’élément de Chrome se fait par la touche F12 du clavier ou un clic droite sur la souris puis « inspecter l’élément » et enfin un clic sur le bouton « Toggle device mode » qui est juste à côté du bouton « Elements ».
Cela déclenchera la vue responsive de Chrome .

Voici la liste de fonctionnalités que nous propose cet inspecteur d’éléments.
Hormis celles qui permettent le redimensionnement d’une page au sein du navigateur avec bien évidemment toutes les mesures et règles associées, on note trois élements importantes qui nous sont offertes :

  • Choix du device
  • Throttle (vitesse de connexion)
  • Media Queries

Conclusion

Toutefois, prenez garde de suivre les évolutions des user agent , en mettant à jour fréquemment votre classe php , vu qu’il fonctionne sur le principe de la reconnaissance des user-agents, en gros l’identification de votre navigateur.

Répondre