JavaScript identifie le téléphone mobile, accède au site Web mobile et revient à la version ordinateur.

À l'ère actuelle de l'Internet mobile, de plus en plus d'utilisateurs aiment naviguer sur le Web via leur téléphone mobile. C’est donc devenu une tendance inévitable de proposer des sites Web adaptés à différents appareils. Dans ce contexte, comment permettre aux utilisateurs de basculer facilement entre la version ordinateur et la version mobile est devenu la clé.

Parmi eux, il s'agit d'une méthode courante pour identifier l'appareil utilisé par l'utilisateur via le code Javascript et accéder automatiquement à la version adaptée correspondante du site Web. Ensuite, cet article présentera le processus de mise en œuvre de cette méthode.

1. Détecter le type d'appareil

Savoir quel appareil l'utilisateur utilise est la condition préalable pour juger si vous devez passer à la version mobile. Pour ce faire, vous devez obtenir les informations sur l'appareil de l'utilisateur via la propriété navigator.userAgent en Javascript.

L'exemple de code est le suivant :

// 判断是否为移动设备
function isMobile() {
   return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}

Grâce à cette fonction, vous pouvez détecter si l'utilisateur utilise un appareil mobile. Si le résultat du test est vrai, cela signifie que l'utilisateur utilise un appareil mobile et doit accéder à la version mobile du site Web.

2. Accédez à la version mobile du site Web

Si les résultats de détection montrent que l'utilisateur utilise un appareil mobile, l'utilisateur doit être redirigé vers la version mobile du site Web.

La méthode spécifique est la suivante :

if (isMobile()) {
   window.location.href = "http://m.example.com";
}

Dans ce code, la méthode permettant de déterminer si l'utilisateur est un appareil mobile appelle la fonction isMobile() mentionnée ci-dessus. Si les conditions sont remplies, l'utilisateur sera redirigé vers le. version mobile du site. Le redirectUrl ici doit être remplacé par l’URL réelle du site Web de la version mobile.

3. Retour à la version informatique du site Internet

Pour la commodité de l'utilisateur, un lien doit être fourni dans la version mobile du site Internet afin que les utilisateurs puissent « revenir à la version informatique du site Internet ». Lors de la mise en œuvre de cette fonction, il est également nécessaire de détecter le type d'appareil de l'utilisateur via le code Javascript. Si l'utilisateur utilise un appareil PC, il doit être redirigé vers la version de bureau du site Web.

L'exemple de code est le suivant :

// 判断是否为 PC 设备
function isPC() {
   return !/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}

// 点击“回到电脑版网站”时，跳转到电脑版网站
$("#returnToPC").click(function(){
   if (isPC()) {
       window.location.href = "http://www.example.com";
   }
});

Dans ce code, le lien "Retour à la version PC du site" est lié à un événement de clic lorsque l'utilisateur clique sur ce lien, après avoir détecté qu'il utilise un. Appareil PC, l'utilisateur sera redirigé vers la version PC correspondante du site Web.

Résumé

Comme mentionné ci-dessus, l'identification du type d'appareil utilisateur en Javascript et le passage à la version adaptée correspondante du site Web, ainsi que la fonction de retour à la version informatique du site Web, sont la base de nombreux sites Web pour réaliser une navigation multiplateforme. En utilisation réelle, il doit être optimisé et étendu en fonction des différents besoins de l'entreprise pour mieux répondre aux besoins des utilisateurs.

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!