Lors de la mise en place de certains scripts nous avons besoin de connaître le type de device courant. Prenons l’exemple de scripts d’analytics ou tout simplement de scripts ayant besoin d’être chargé selon le device, tablette, mobile, desktop. Nous allons voir comment récupérer le type de device courant en JavaScript en utilisant userAgent.

userAgent

userAgent est une propriété de l’objet navigator qui indique l’agent utilisateur que le navigateur fournit dans les en-têtes HTTP.

On va via la valeur de cette propriété tester avec des regex la présence ou non de certains items permettant de déterminer le type de device, tablette, mobile ou si aucun des deux on renverra desktop par défaut.

const getDeviceType = () => {
  const ua = navigator.userAgent;
  if (/(tablet|ipad|playbook|silk)|(android(?!.*mobi))/i.test(ua)) {
    return "tablet";
  }
  if (
    /Mobile|iP(hone|od|ad)|Android|BlackBerry|IEMobile|Kindle|Silk-Accelerated|(hpw|web)OS|Opera M(obi|ini)/.test(
      ua
    )
  ) {
    return "mobile";
  }
  return "desktop";
};

userAgent ne pourra pas toujours nous indiquer le device réel étant donné que dans certains cas celui-ci peut override et avoir une valeur totalement différente, exemple dans le cas des bots. Dans ce cas là on se basera pluôt sur la disponibilté/indisponibilté des méthodes selon les devices.

Testons notre fonction

desktop

desktop device detection javascript

tablet

tablet device detection javascript

mobile

mobile device detection javascript

Liens utiles

Avant de partir…
Merci pour votre lecture ! 😊