web-dev-qa-db-fra.com

Détecter si l'appareil est iOS

Je me demande s’il est possible de détecter si un navigateur fonctionne sous iOS, de la même manière que vous pouvez détecter les fonctionnalités avec Modernizr (bien qu’il s’agisse bien entendu d’une détection de périphérique plutôt que d’une détection de fonctionnalité).

Normalement, je préférerais la détection de fonctionnalités à la place, mais je dois savoir si un appareil est iOS en raison de la façon dont ils traitent les vidéos conformément à cette question l'API YouTube ne fonctionne pas avec un iPad/iPhone/un périphérique non Flash

javascriptiosbrowserbrowser-feature-detection
363
SparrwHawk

Détecter iOS

Je ne suis pas un fan de User Agent reniflant, mais voici comment vous le feriez:

var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;

Une autre méthode consiste à utiliser navigator.platform:

var iOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);

iOS sera soit true ou false

Pourquoi pas MSStream

Microsoft a injecté le Word iPhone dans userAgent d'IE11 afin d'essayer de tromper Gmail. Par conséquent, nous devons l'exclure. Plus d'infos sur ceci ici et ici .

Ci-dessous, la mise à jour de userAgent (Mise à jour d'Internet Explorer pour Windows Phone 8.1) d'IE11:

Mozilla/5.0 (Mobile; Windows Phone 8.1; Android 4.0; ARM; Trident/7.0; Touch; RV: 11.0; IEMobile/11.0; NOKIA; Lumia 930) comme un iPhone OS 7_0_3 Mac OS X AppleWebKit/537 (KHTML, comme Gecko) Mobile Safari/537

Ajoutez facilement plus de périphériques, sans utiliser d'expressions régulières:

function iOS() {

  var iDevices = [
    'iPad Simulator',
    'iPhone Simulator',
    'iPod Simulator',
    'iPad',
    'iPhone',
    'iPod'
  ];

  if (!!navigator.platform) {
    while (iDevices.length) {
      if (navigator.platform === iDevices.pop()){ return true; }
    }
  }

  return false;
}

iOS() sera soit true ou false

Remarque: navigator.userAgent et navigator.platform peuvent être falsifiés par l'utilisateur ou une extension du navigateur.

Détection de la version iOS

Le moyen le plus courant de détecter la version iOS consiste à en l’analysant à partir de la chaîne de l’agent utilisateur . Mais il y a aussi fonctionnalité détection inférence * ;

Nous savons pertinemment que history API a été introduit dans iOS4 - matchMedia API dans iOS5 - webAudio API in iOS6 - WebSpeech API in iOS7 et ainsi de suite.

Remarque: Le code suivant n'est pas fiable et tombera en panne si l'une de ces fonctionnalités HTML5 est obsolète dans une version iOS plus récente. Tu étais prévenu!

function iOSversion() {

  if (/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream) {
    if (!!window.indexedDB) { return 'iOS 8 and up'; }
    if (!!window.SpeechSynthesisUtterance) { return 'iOS 7'; }
    if (!!window.webkitAudioContext) { return 'iOS 6'; }
    if (!!window.matchMedia) { return 'iOS 5'; }
    if (!!window.history && 'pushState' in window.history) { return 'iOS 4'; }
    return 'iOS 3 or earlier';
  }

  return 'Not an iOS device';
}
744
Pierre

Ceci définit la variable _iOSDevice sur true ou false

_iOSDevice = !!navigator.platform.match(/iPhone|iPod|iPad/);
14
Vitim.us

Si vous utilisez Modernizr , vous pouvez ajouter un test personnalisé pour celui-ci.

Peu importe le mode de détection que vous décidez d'utiliser (userAgent, navigator.vendor ou navigator.platform), vous pouvez toujours le résilier pour une utilisation plus facile ultérieurement.

//Add Modernizr test
Modernizr.addTest('isios', function() {
    return navigator.userAgent.match(/(iPad|iPhone|iPod)/g);
});

//usage
if (Modernizr.isios) {
    //this adds ios class to body
    Modernizr.prefixed('ios');
} else {
    //this adds notios class to body
    Modernizr.prefixed('notios');
}
10
ThiagoPXP

Il existe ces tests personnalisés Modernizr: https://Gist.github.com/855078

8
sgt9dg8s90

Une version simplifiée et facile à étendre.

var iOS = ['iPad', 'iPhone', 'iPod'].indexOf(navigator.platform) >= 0;
5
Kory Nunn

Dans la mesure du possible, lorsque vous ajoutez des tests Modernizr, vous devez ajouter un test pour une fonctionnalité plutôt que pour un périphérique ou un système d'exploitation. Il n'y a rien de mal à ajouter dix tests, tous testant pour iPhone si c'est ce qu'il faut. Certaines choses ne peuvent tout simplement pas être détectées.

    Modernizr.addTest('inpagevideo', function ()
    {
        return navigator.userAgent.match(/(iPhone|iPod)/g) ? false : true;
    });

Par exemple, sur l'iPhone (pas sur l'iPad), la vidéo ne peut pas être lue en ligne sur une page Web, elle s'ouvre en plein écran. J'ai donc créé un test 'no-inpage-video'

Vous pouvez ensuite l'utiliser en css (Modernizr ajoute une classe .no-inpagevideo à la balise <html> en cas d'échec du test.)

.no-inpagevideo video.product-video 
{
     display: none;
}

Ceci cachera la vidéo sur iPhone (ce que je suis en train de faire dans ce cas montre une image alternative avec un clic pour lire la vidéo - je ne veux tout simplement pas que le lecteur vidéo par défaut et le bouton de lecture s'affichent).

2
Simon_Weaver

J'ai écrit cela il y a quelques années, mais je crois que cela fonctionne toujours:

if(navigator.vendor != null && navigator.vendor.match(/Apple Computer, Inc./) && navigator.userAgent.match(/iPhone/i) || (navigator.userAgent.match(/iPod/i))) 

    {

        alert("iPod or Iphone");

    }

else if (navigator.vendor != null && navigator.vendor.match(/Apple Computer, Inc./) && navigator.userAgent.match(/iPad/i))  

    {

        alert("Ipad");

    }

else if (navigator.vendor != null && navigator.vendor.match(/Apple Computer, Inc./) && navigator.userAgent.indexOf('Safari') != -1)

    {

        alert("Safari");

    }

else if (navigator.vendor == null || navigator.vendor != null)

    {

        alert("Not Apple Based Browser");

    }
2
Michael Benin

Les agents utilisateurs sur les appareils iOS désignent un iPhone ou un iPad. Je filtre simplement en fonction de ces mots-clés.

2
Bryan Naegele

Wow, beaucoup de code long et compliqué ici. Gardez les choses simples, s'il vous plaît!

Celui-ci est IMHO rapide, enregistrer et fonctionne bien:

 iOS = /^iP/.test(navigator.platform);

 // or, more future-proof (in theory, probably not in practice):

 iOS = /^iP(hone|[ao]d)/.test(navigator.platform);

 // or, if you prefer readability:

 iOS = /^(iPhone|iPad|iPod)/.test(navigator.platform);
  • C'est rapide parce que l'expression rationnelle vérifie d'abord ^ s la position de départ de la chaîne de la plate-forme et s'arrête s'il n'y a pas "iP" (plus rapide que la recherche de la chaîne longue de l'agent utilisateur jusqu'à la fin de toute façon)
  • C'est plus sûr que UA check (en supposant que navigator.platform est moins susceptible d'être falsifié)
  • Détecte le simulateur iPhone/iPad
2
j.j.

Mettez à jour légèrement la première réponse en utilisant une approche plus fonctionnelle.

    const isIOS = [
      'iPad Simulator',
      'iPhone Simulator',
      'iPod Simulator',
      'iPad',
      'iPhone',
      'iPod',
    ]
      .map(device => navigator.platform === device)
      .filter(device => device)
      .reduce(() => true, false);
0
Sten Muchow

Il est probablement utile de préciser que les iPad sous iOS 13 auront navigator.platform réglé sur MacIntel, ce qui signifie que vous devrez trouver un autre moyen de détecter les périphériques iPadOS.

0
Justin Searls