Comment détecter les navigateurs mobiles avec JavaScript

La détection mobile a toujours été un aspect crucial du développement d'applications. Il est pertinent à la fois pour les applications, mais aussi pour les logiciels et les sites Web. Il existe d'innombrables raisons de vérifier les agents de navigateur mobile. Plus important encore, la capacité de rendre une expérience utilisateur unique.

La bibliothèque UAParser.js reçoit à elle seule des millions de téléchargements hebdomadaires de packages. Et, dans la plupart des cas, cela suffit si vous construisez quelque chose à partir de zéro. Mais qu'en est-il des autres moyens de détecter les navigateurs mobiles avec JavaScript ?

Parfois, vous voudrez peut-être simplement une solution simple qui fasse le travail sans aucune bibliothèque. Et dans cet article, je vais vous présenter quelques techniques JavaScript pour détecter les utilisateurs mobiles. Faites-moi savoir si j'en ai oublié!

navigateur.userAgent

Le Saint Graal de la détection du navigateur est la propriété navigator.UserAgent.

 if (https://c6c8j7x5.rocketcdn.me/Android|iPhone/i.test(navigator.userAgent)) { // This checks if the current device is in fact mobile } // an alternative structure to check individual matches if ( navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/iPhone/i) ) { // making individual checks }

C'est, bien sûr, une façon très primitive de le faire. Il peut facilement être manipulé car la propriété User-Agent peut être usurpée. Mais, parce qu'il fait le travail, vous pouvez toujours l'utiliser dans une variété de projets. Par exemple, les pages de destination ou la création d'une redirection personnalisée vers une version mobile.

Comment utiliser navigator.userAgent pour détecter le type de navigateur et afficher le contenu en fonction du navigateur spécifique ?

D'accord, il peut donc y avoir un cas d'utilisation unique où vous souhaitez détecter un navigateur spécifique, tel que Chrome et Firefox (ou dans ce cas, Android et iPhone), puis utiliser ces données pour afficher un contenu spécifique. Cette approche est souvent utilisée pour fournir/modifier des liens de téléchargement pour des navigateurs spécifiques.

Dans ce cas, vous pouvez utiliser la fonction suivante.

 function detectBrowser() { let userAgent = navigator.userAgent; let browserName; if (userAgent.match(/chrome|chromium|crios/i)) { browserName = "Chrome"; } else if (userAgent.match(/firefox|fxios/i)) { browserName = "Firefox"; } else if (userAgent.match(/safari/i)) { browserName = "Safari"; } else if (userAgent.match(/opr\//i)) { browserName = "Opera"; } else if (userAgent.match(/edg/i)) { browserName = "Edge"; } else if (userAgent.match(/android/i)) { browserName = "Android"; } else if (userAgent.match(/iphone/i)) { browserName = "iPhone"; } else { browserName = "Unknown"; } document.querySelector("div.form-style h3").innerText = "You are browsing with: " + browserName + ""; }

Vous pouvez commenter les différentes instructions else if pour les navigateurs que vous ne souhaitez pas vérifier, et de même, vous pouvez ajouter des navigateurs supplémentaires que vous souhaitez vérifier.

Événement tactile

Une méthode pour détecter les utilisateurs mobiles consiste à vérifier si l'appareil dispose d'un écran tactile.

À l'aide de la propriété GlobalEventHandlers.ontouchstart, vous pouvez effectuer une simple vérification pour voir comment l'utilisateur a interagi avec votre application. Si l'interaction provient d'un écran tactile, vous pouvez alors renvoyer une version mobile de l'application ou de la page.

 if ("ontouchstart" in document.documentElement) { // content for touch-screen (mobile) devices } else { // everything else (desktop) }

Les appareils à écran tactile comme Surface n'ont pas cette propriété. Ainsi, les utilisateurs provenant d'appareils tactiles de bureau verront toujours la version de bureau de vos pages.

Window.matchMedia()

Le Window.matchMedia() est l'une des meilleures propriétés pour détecter les utilisateurs mobiles avec JavaScript. Et c'est ainsi parce qu'il vous permet d'interagir directement avec CSS.

Dans de nombreux cas, les requêtes multimédias sont supérieures car elles disposent d'outils de détection mobiles intégrés. Par exemple, vous pouvez effectuer un appel pour vérifier si "pointer:coarse" est vrai.

Cette instruction spécifique valide si le pointeur de l'appareil est fin ou grossier .

 let isMobile = window.matchMedia("(pointer:coarse)").matches;

Alternativement, l'appareil peut avoir à la fois un pointeur fin et grossier. Pour ce cas d'utilisation, nous pouvons vérifier si des pointeurs sont grossiers.

 let isMobile = window.matchMedia("(any-pointer:coarse)").matches;

Gardez à l'esprit que cela valide uniquement la requête comme vraie ou fausse. Une façon plus raffinée de vérifier les appareils mobiles consiste à utiliser directement les requêtes multimédias.

 let isMobile = window.matchMedia("only screen and (max-width: 480px)").matches;

Cette requête vérifiera directement la largeur maximale de l'appareil et déterminera si elle correspond aux critères. Encore une fois, c'est beaucoup de travail pour obtenir tous les appareils correctement. En tant que tel, il est plus facile d'utiliser une bibliothèque prédéfinie avec tous les types d'appareils déjà définis.

Utile dans certains contextes

Au fil des ans, de nombreuses propriétés JavaScript ont été créées pour détecter les types d'appareils. Un grand nombre d'entre eux sont devenus obsolètes, mais la plupart des autres ont été intégrés dans des bibliothèques. Ce qui se trouve également être la meilleure façon de faire une détection mobile appropriée.

Enfin, la plupart des frameworks modernes incluent déjà la détection mobile dans le cadre du framework lui-même. Cela vaut la peine d'être examiné si vous ne voulez pas faire toutes les démarches.

Bibliothèques pour détecter les appareils mobiles

Pour cette section, je vais lister les bibliothèques JavaScript les plus populaires pour détecter les appareils mobiles. Encore une fois, je souligne que ceux-ci sont spécifiques à JavaScript. Reportez-vous à la documentation pour une implémentation correcte dans votre application.

UAParser.js

En ce qui concerne les bibliothèques complètes, UAParser est le meilleur qui soit. Avec plus de 10 millions de téléchargements hebdomadaires sur npm seul, UAParser est la solution de facto pour détecter les appareils mobiles. Comme son nom l'indique, la bibliothèque fonctionne en analysant les chaînes User-Agent.

Cependant, ce qui le rend si populaire, c'est le fait que vous pouvez analyser des centaines de variantes d'appareils. Et tout cela est très bien documenté. Vous pouvez passer de fournisseurs de périphériques pratiques à des modèles de détection plus complexes comme l'architecture du processeur.

mobile-detect.js

Il s'agit d'un port assez simple de la bibliothèque Mobile Detect pour PHP, fournie à la communauté par Heinrich Goebl. La bibliothèque elle-même utilise User-Agent pour la détection, donc comme nous l'avons vu précédemment, ce n'est pas la meilleure option.

Néanmoins, il devrait faire l'affaire lorsqu'il s'agit de modèles HTML pratiques ou de projets de portefeuille.

isMobile

Ici, nous avons une autre version de la propriété User-Agent Navigator de Kai Mallea. Bien qu'il s'agisse toujours d'une solution simpliste, j'aime le fait qu'isMobile fournisse une variété de spécifications. Par exemple, vous pouvez tester n'importe quel appareil mobile ou des appareils spécifiques comme un téléphone ou une tablette .

réagir-appareil-détecter

Êtes-vous un développeur React.js ?

Alors cette bibliothèque de Michael Laktionov est faite pour vous. Cela fonctionne comme prévu - la bibliothèque détecte d'abord le type de périphérique, puis affiche la vue en fonction de ce type. Fonctionne parfaitement avec l'intégration de composants et peut être davantage personnalisé via des appels d'API.

Un fait intéressant est le nombre de sélecteurs inclus dans cette bibliothèque. Il couvre des appareils tels que les téléviseurs intelligents, les appareils portables, une variété d'appareils iPhone et bien plus encore. Cela vous donne un large choix de choix de conception lors de la création d'une application pour un appareil spécifique.