Rediriger les utilisateurs de mobiles vers une url mobile et les utilisateurs de tablettes/ipads vers une autre url.

Question

J'ai essayé ce javascript posté ici il y a plusieurs années :

<script>
if (/iP(hone|od)|android.+mobile|BlackBerry|IEMobile/i.test(navigator.userAgent)) {
window.location.replace("page2.html");
} else if (/(tablet|ipad|playbook|silk)|(android(?!.*mobile))/i.test(navigator.userAgent)) {
window.location.replace("page3.html");
}
</script>

Alors que la redirection mobile fonctionne sur iphone, la redirection tablette/ipad ne fonctionne pas sur iPad (6ème génération ou 8ème génération). Toute suggestion est la bienvenue. (Veuillez comprendre que je ne suis pas un codeur dans toutes les réponses).

Answer 1

Après avoir parcouru ce fil : Quelle est la meilleure façon de détecter un appareil mobile ?
Il est apparemment considéré comme peu fiable d'utiliser l'agent utilisateur pour la redirection.
En référence à ce post : Détection d'un navigateur mobile
L'utilisation d'un élément comme la résolution de l'écran est un élément que vous pouvez envisager par rapport à cette méthode :

( window.innerWidth <= 800 ) && ( window.innerHeight <= 600 )

Considérez ce qui suit comme une solution de contournement. Comme indiqué dans les commentaires, les agents utilisateurs d'ipadOS et de MacOS sont les mêmes. Cependant, navigator.maxTouchPoints peut être un facteur de différenciation :

    if (/mac/i.test(navigator.userAgent) && navigator.maxTouchPoints>0 ){
     // do something on ipad
    }

Answer 2

Les personnes intelligentes ici présentes me diront peut-être pourquoi ce codage n'est pas bon, mais depuis que j'ai posté cette question, j'ai découvert que ce qui suit a fonctionné pour une ancienne petite tablette Android, les iPhones 6s et 11 et les ipads de 6e et 8e génération, un ordinateur de bureau et un ordinateur portable tactile. J'ai maintenant épuisé toute la technologie dans ma maison !

Placé dans la section de tête :

<link rel="alternate" href="https://mywebsite.com/index.html" id="desktop"
media="only screen and (touch-enabled: 0)">
<link rel="alternate" href="https://mywebsite.com/page2.html " id="phone"
media="only screen and (max-device-width: 640px)">
<link rel="alternate" href="https://mywebsite.com/page3.html" id="tablet"
media="only screen and (min-device-width: 641px)">

<!-- Viewport is very important, since it affects results of media
query matching. -->
<meta name="viewport" content="width=device-width">

<!-- Place the JS in the head to load as little of the page as
possible before (potentially) redirecting. -->
<script src="js/device.js"></script>

Et puis j'ai chargé le fichier device.js dans le dossier js. Je l'ai obtenu à partir de https://github.com/borismus/device.js/tree/master/build