JavaScript détecte le navigateur mobile

1. Détecter le navigateur mobile en détectant l’appareil utilisé
2. Détecter le navigateur mobile par écran tactile

JavaScript est largement utilisé pour développer des applications Web. La plupart de ces applications sont également compatibles avec les navigateurs mobiles.

Ce didacticiel présentera les différentes méthodes disponibles pour détecter un navigateur mobile à l’aide de JavaScript.

Détecter le navigateur mobile en détectant l’appareil utilisé

L’approche la plus simple et la plus directe pour identifier un navigateur mobile à l’aide de JavaScript consiste à parcourir une liste de divers appareils disponibles sur le marché aujourd’hui et à vérifier si le useragent complète l’un des appareils de la liste à notre disposition.

Ce qui suit est l’extrait de code de la fonction avec laquelle nous allons travailler -

function detectMob() {
  const toMatch = [
    /Android/i, /webOS/i, /iPhone/i, /iPad/i, /iPod/i, /BlackBerry/i,
    /Windows Phone/i
  ];

  return toMatch.some((toMatchItem) => {
    return navigator.userAgent.match(toMatchItem);
  });
}

Nous pouvons affiner davantage notre recherche d’appareils mobiles en supposant que l’appareil cible est mobile si la résolution est inférieure ou égale à 800x600, même si la plupart des mobiles disponibles aujourd’hui offrent une résolution bien supérieure.

Par conséquent, il est recommandé d’utiliser les deux méthodes, de détecter l’appareil utilisé et de détecter la résolution de l’appareil pour une efficacité maximale afin d’éviter les faux positifs.

Ce qui suit est le code pour détecter la résolution de l’appareil que l’utilisateur utilise.

function detectMob() {
  return ((window.innerWidth <= 800) && (window.innerHeight <= 600));
}

Détecter le navigateur mobile par écran tactile

Une autre approche pour vérifier si l’appareil cible utilisé par l’utilisateur est un appareil mobile ou non consiste à vérifier si l’utilisateur utilise un appareil tactile. Étant donné que tous les téléphones mobiles disponibles sur le marché aujourd’hui sont tactiles, cette méthode est fiable et efficace.

Cependant, il existe une limitation selon laquelle cette méthode inclura également les tablettes, car elles sont également tactiles.

Nous pouvons utiliser le code suivant pour détecter un navigateur mobile en voyant si l’appareil fonctionne à l’aide d’un écran tactile.

var touchDevice = ('ontouchstart' in document.documentElement);

Cette fonction peut être étendue pour inclure non seulement les téléphones mobiles et les tablettes, mais également les ordinateurs de bureau et les ordinateurs portables prenant en charge les écrans tactiles.

var touchDevice = ('ontouchstart' in document.documentElement);