web-dev-qa-db-fra.com

Comment détecter la version iPad et iPad OS dans iOS 13 et plus?

Je peux détecter iOS 13 sur iPhone mais sur iPad OS 13 navigator.platform vient sous MacIntel. Il n'est donc pas possible d'identifier iPad à l'aide du code ci-dessous, mais cela fonctionne parfaitement sur iPhone.

    if (/iP(hone|od|ad)/.test(navigator.platform)) {
            var v = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);
            var version = [parseInt(v[1], 10), parseInt(v[2], 10), parseInt(v[3] || 0, 10)];
            return version;
    }

Lorsque nous demandons un site Web mobile à l'aide du navigateur sur iPad navigator.platform revient comme iPad et fonctionne parfaitement.

Quelqu'un peut-il suggérer un moyen d'identifier iPad fonctionnant sur iOS 13 et plus en utilisant Javascript?

javascriptiosipadios13ipados13
13
MaDu_LK

C'est simple - vous ne pouvez pas. Vous ne pouvez utiliser que des hacks comme celui-ci

let isIOS = /iPad|iPhone|iPod/.test(navigator.platform)
|| (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)

La première condition pour "mobile", la seconde pour iPad imitant Macintosh Safari. Cela fonctionne de manière fiable pour moi, mais qui sait ce qui va changer à l'avenir. S'il doit y avoir des Mac avec écran tactile, cela détectera non seulement les iPad en mode Bureau, mais aussi les Mac ordinaires.

L'autre façon est la détection des fonctionnalités - vous pouvez, mais ne devriez probablement pas compter sur la prise en charge des fonctionnalités du navigateur. Par exemple, Safari sur Mac ne prend pas en charge le sélecteur de date, mais le mobile le fait.

Quoi qu'il en soit, je vous suggère d'essayer de ne pas compter sur la détection de plate-forme (qui sera de toute façon cassée à l'avenir) et d'utiliser la détection de fonctionnalités (mais pas sur des plates-formes distinctes) comme Modernizr à la place - si vous souhaitez utiliser le sélecteur de date, vous pouvez vérifier s'il est disponible et si ce n'est pas le cas, utilisez plutôt une solution HTML. Ne verrouillez pas les utilisateurs simplement parce qu'ils utilisent un autre navigateur. Vous pouvez les informer mais leur donner la possibilité de masquer la notification et d'utiliser votre site de toute façon.

En tant qu'utilisateur, je déteste quand quelqu'un me dit d'aller utiliser un autre navigateur

N'oubliez pas - la détection de la plate-forme indique une mauvaise odeur de code car ce sont tous des hacks.

1
kikiwora

J'ai un peu élargi l'implémentation pour utiliser certaines fonctionnalités de navigateur par défaut sur iPad OS vs Mac OS Catalina. Selon mes tests sur divers iPad et tous les derniers appareils iOS, cela fonctionne bien.

let isIPadOs = function() {
return window.AuthenticatorAssertionResponse === undefined
        && window.AuthenticatorAttestationResponse === undefined
        && window.AuthenticatorResponse === undefined
        && window.Credential === undefined
        && window.CredentailsContainer === undefined
        && window.DeviceMotionEvent !== undefined
        && window.DeviceOrientationEvent !== undefined
        && navigator.maxTouchPoints === 5
        && navigator.plugins.length === 0
        && navigator.platform !== "iPhone";
}

Gist: https://Gist.github.com/braandl/f7965f62a5fecc379476d2c055838e36

1
braandl

C'est un peu hack et sûrement pas très sûr à l'avenir, mais pour l'instant nous utilisons ce qui suit et il semble faire l'affaire.

Le premier bloc renifle simplement l'agent utilisateur pour les anciens iPad et le deuxième bloc après "OU" vérifie si la plate-forme est Macintosh et a des points de contact. Au moment d'écrire ces lignes, il n'y a pas encore d'écran tactile officiel pour Mac, il devrait donc être assez sûr pendant un certain temps.

if ((/\b(iPad)\b/.test(navigator.userAgent)
    && /WebKit/.test(navigator.userAgent)
    && !window.MSStream)
    || (navigator.platform === 'MacIntel'
    && navigator.maxTouchPoints
    && navigator.maxTouchPoints === 5)
  ) {
        return true;
    }
0
A.G.

Vous pouvez utiliser WURFL.js, qui est gratuit si vous voulez simplement savoir quel appareil est utilisé: https://web.wurfl.io/#wurfl-js

Divulgation complète, je suis le COO de la société derrière WURFL et ImageEngine, mais je suis aussi n développeur open-source :)

WURFL.js peut vous dire quel système d'exploitation est utilisé et s'il s'agit d'un iPhone ou d'un iPad.

Pour l'utiliser, ajoutez simplement ceci en tête de votre page:

<script type="text/javascript" src="//wurfl.io/wurfl.js"></script>

Ensuite, vous pouvez utiliser les informations sur l'appareil en javascript:

console.log(WURFL.complete_device_name);

Remarque: Avec la version payante vous pouvez obtenir des résultats plus précis (ex: Apple iPhone XS Max, Apple iPad Pro 11) ainsi que de nombreuses autres caractéristiques de l'appareil.

Si vous n'avez pas besoin des informations sur le périphérique pour la peinture initiale, vous pouvez également l'exécuter de manière asynchrone afin qu'elle ne bloque pas le rendu. Collez-le à la fin du corps et utilisez async ou defer:

<script type="text/javascript">
window.addEventListener('WurflJSDetectionComplete', () => {
   console.log(`Device: ${WURFL.complete_device_name}`);
});
</script>
<script type="text/javascript" src="//wurfl.io/wurfl.js" async></script>

Pendant que vous y êtes, vous pouvez aussi utiliser ces informations améliorées sur l'appareil pour améliorer Google Analytics: https://www.scientiamobile.com/wurfljs-google-analytics-iphone/

Notez que contrairement aux autres réponses, celle-ci ne nécessite aucune maintenance continue de la part du développeur.

0
SteveK