Comment déterminer s'il s'agit d'une connexion mobile avec javascript

Avec la popularité des smartphones, de plus en plus d'utilisateurs choisissent d'utiliser leur téléphone mobile pour se connecter à des sites Web. Lors du développement de sites Web, nous devons parfois déterminer si l'utilisateur se connecte via un téléphone mobile ou un ordinateur afin de procéder à l'optimisation et aux ajustements correspondants. Cet article explique comment utiliser JavaScript pour déterminer si l'utilisateur se connecte via un téléphone mobile.

1. Détection via l'agent utilisateur

Nous pouvons obtenir les informations sur le navigateur et le système d'exploitation auprès de l'agent utilisateur et déterminer si l'utilisateur s'est connecté via un téléphone mobile en déterminant s'il contient des mots-clés spécifiques du navigateur mobile. Voici les informations courantes sur l'agent utilisateur du navigateur mobile :

• Informations sur l'agent utilisateur pour les appareils mobiles

  Mozilla/5.0 (iPhone; CPU iPhone OS 14_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0 Mobile/15E148 Safari/604.1
  Mozilla/5.0 (iPad; CPU OS 14_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/86.0.4240.93 Mobile/15E148 Safari/604.1

  Copier après la connexion

• Informations sur l'agent utilisateur pour les appareils Android

  Mozilla/5.0 (Linux; Android 11; Pixel 5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.198 Mobile Safari/537.36

  Copier après la connexion

Nous pouvons utiliser des expressions régulières pour comparer la correspondance entre l'agent utilisateur pour déterminer s'il contient le mot-clé du navigateur mobile. Voici le code JavaScript pour déterminer s'il s'agit d'une connexion mobile :

function isMobile() {
    const ua = navigator.userAgent;
    const isIOS = /iPhone|iPad|iPod/i.test(ua);
    const isAndroid = /Android/i.test(ua);
    const isMobile = isIOS || isAndroid;
    return isMobile;
}

Dans le code ci-dessus, nous obtenons d'abord les informations de l'agent utilisateur du navigateur, puis utilisons des expressions régulières pour déterminer s'il contient des navigateurs mobiles tels que l'iPhone. , iPad, iPod et Android, et renvoie enfin une valeur booléenne indiquant si l'utilisateur s'est connecté via un téléphone mobile.

2. Détecter par résolution d'écran

Une autre façon de déterminer si l'utilisateur se connecte via un téléphone mobile consiste à détecter par résolution d'écran. Étant donné que les résolutions d'écran des téléphones mobiles et des ordinateurs sont très différentes, nous pouvons déterminer si l'utilisateur se connecte via un téléphone mobile ou un ordinateur en fonction de la résolution de l'écran.

Habituellement, la largeur des écrans de téléphones portables ne dépasse pas 768 pixels, tandis que la largeur des écrans d'ordinateur est généralement supérieure à 1024 pixels. Par conséquent, nous pouvons déterminer si la largeur actuelle de l'écran est inférieure à 768 pixels afin de déterminer si l'utilisateur se connecte via un téléphone mobile.

Voici le code JavaScript permettant de déterminer si l'utilisateur se connecte via un téléphone mobile :

function isMobile() {
    const width = window.innerWidth;
    const isMobile = width <= 768;
    return isMobile;
}

Dans le code ci-dessus, nous obtenons la largeur de la fenêtre actuelle et déterminons si elle est inférieure ou égale à 768 pixels à déterminer si l'utilisateur se connecte via un téléphone mobile.

3. Utilisation complète

Les deux méthodes ci-dessus ont chacune leurs propres avantages et inconvénients, et vous devez choisir en fonction de la situation réelle lors de leur utilisation. Habituellement, nous pouvons utiliser deux méthodes en combinaison pour améliorer la précision du jugement.

Ce qui suit est le code JavaScript qui combine les deux méthodes ci-dessus :

function isMobile() {
    const ua = navigator.userAgent;
    const width = window.innerWidth;
    const isIOS = /iPhone|iPad|iPod/i.test(ua);
    const isAndroid = /Android/i.test(ua);
    const isMobile = isIOS || isAndroid || width <= 768;
    return isMobile;
}

Dans le code ci-dessus, nous obtenons simultanément les informations de l'agent utilisateur du navigateur et la largeur de la fenêtre actuelle, et utilisons des expressions régulières et résolution de l'écran pour déterminer si l'utilisateur se connecte via son téléphone mobile.

Résumé

L'utilisation de JavaScript pour déterminer si l'utilisateur se connecte via un téléphone mobile peut nous aider à effectuer les optimisations et les ajustements correspondants pour améliorer l'expérience utilisateur du site Web. Cet article présente deux méthodes de jugement, à savoir l'utilisation de la détection de l'agent utilisateur et la détection de la résolution d'écran, et comment les utiliser de manière globale. J'espère que cet article pourra être utile à tous les développeurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!