Quelle est la meilleure manière de détecter un terminal mobile en JQuery ?

Il existe différentes méthodes pour détecter l'utilisation d'un smartphone. Tour d'horizon avec codes à l'appui.

Comme les éléments de style d'une page, un script JavaScript peut également s'adapter au support sur lequel un site est affiché. Un affichage plus petit, par exemple sur l'écran d'un smartphone, peut nécessiter une modification du fonctionnement de votre code JavaScript. Il existe différentes méthodes pour détecter l'utilisation d'un smartphone.

La première méthode se base sur le user-agent. C'est une chaîne de caractères qui identifie le navigateur et le système d'exploitation ou l'appareil utilisé. On obtient le user-agent du navigateur avec l'attribut navigator.userAgent. Il suffit ensuite de le tester avec une expression régulière.

//Version simplifiée regroupant les principaux périphériques et systèmes mobiles
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) )
{
//Code si vous détectez un de ces appareils
}</pre>

Cette méthode possède des inconvénients. Un navigateur peut modifier son user-agent et dans ce cas il ne sera pas détecté forcément comme un smartphone. De plus, si un nouveau navigateur ou un nouvel appareil est développé, vous allez devoir modifier ce code. L'avantage de cette méthode est qu'elle est compatible avec tous les navigateurs utilisant le JavaScript.

Il existe une méthode plus simple et plus fiable, les media queries. Ce sont des requêtes conditionnelles utilisées dans le langage CSS3 pour détecter un écran selon ses caractéristiques. Elles s'utilisent dans une feuille de style CSS avec le mot-clé @media. Pour détecter des périphériques avec un petit écran, il suffit de faire une requête sur la largeur de l'écran. Pour que le JavaScript puisse détecter lui aussi les media queries, il suffit par exemple d'effectuer une modification de style en CSS qui sera détectable par le JavaScript, par exemple masquer un élément.

<pre>/* Feuille de style CSS */
@media only screen and (max-width: 760px)
{
#monElement { display: none; }
}
//JavaScript
var estUnMobile = false;
if(document.getElementByID('monElement').style.display == 'none')
{
estUnMobile = true;
}
if (estUnMobile)
{
//Insérez le code pour les mobiles
}</pre>

Les media queries de CSS ne fonctionnent que pour les navigateurs qui supportent la norme CSS3.

Le langage JavaScript possède également sa propre implémentation des media queries, l'API window.matchmedia. Il est possible de n'utiliser que le JavaScript pour détecter un périphérique avec un petit écran. La méthode matches() vérifie alors si la condition de la requête est remplie.

<pre>var estMobile = window.matchMedia(only screen and (max-width: 760px));
if (estMobile.matches)
{
//Insérez le code pour les mobiles
}</pre>

Le support de cette API par les navigateurs est également récent. Il est notamment plus réduit que celui des media queries CSS3. Vérifiez bien quel navigateur supporte ces méthodes afin de développer le code qui correspondra à vos besoins.

JQuery