Je me demande s'il est possible de détecter si un navigateur fonctionne sur iOS, de la même manière que vous pouvez détecter avec Modernizr (bien que ce soit évidemment la détection d'appareil plutôt que la détection de fonctionnalité).

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

Détection d'iOS

Je ne suis pas un fan de reniflement d'agent utilisateur, mais voici comment vous le feriez:

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

Une autre façon repose sur navigator.platform:

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

iOSsera soit trueoufalse

Pourquoi pas MSStream

Microsoft a injecté le mot iPhone dans IE11 userAgentafin d'essayer de tromper Gmail d'une manière ou d'une autre. Nous devons donc l'exclure. Plus d'informations ici et ici .

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

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 iPhone OS 7_0_3 Mac OS X AppleWebKit / 537 (KHTML, comme Gecko) Safari mobile / 537

Ajoutez facilement plus d'appareils, 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 trueoufalse

Remarque: Les deux navigator.userAgentet navigator.platformpeuvent être falsifiés par l'utilisateur ou une extension de navigateur.

Détection de la version iOS

La façon la plus courante de détecter la version iOS consiste à l' analyser à partir de la chaîne de l'agent utilisateur . Mais il existe également une inférence de détection de fonctionnalité * ;

Nous savons pour un fait qui a history APIété introduit dans iOS4 - matchMedia APIdans iOS5 - webAudio APIdans iOS6 - WebSpeech APIdans iOS7 et ainsi de suite ..

Remarque: Le code suivant n'est pas fiable et se cassera si l'une de ces fonctionnalités HTML5 est déconseillée 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';
}

Après iOS 13, vous devriez détecter les appareils iOS comme celui-ci, car l'iPad ne sera pas détecté en tant qu'appareil iOS par les anciennes méthodes (en raison des nouvelles options "de bureau", activées par défaut):

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

La première condition pour iOS <13 ou iPhone ou iPad avec le mode Bureau désactivé, la deuxième condition pour iPadOS 13 dans la configuration par défaut, car il se positionne comme Macintosh Intel, mais est en fait le seul Macintosh avec multi-touch.

Plutôt un hack qu'une vraie solution, mais fonctionne de manière fiable pour moi

PS Comme cela a été dit plus tôt, vous devriez probablement ajouter une vérification IE

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

Cela définit la variable _iOSDevicesur vrai ou faux

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

Si vous utilisez Modernizr , vous pouvez lui ajouter un test personnalisé.

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

//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');
}

Il y a ces tests Modernizr personnalisés: https://gist.github.com/855078

Une version simplifiée et facile à étendre.

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

Il vaut probablement la peine de répondre que les iPads exécutant iOS 13 auront été navigator.platformconfigurés MacIntel, ce qui signifie que vous devrez trouver un autre moyen de détecter les appareils iPadOS.

J'ai écrit cela il y a quelques années, mais je pense 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");

    }

Les agents utilisateurs sur les appareils iOS indiquent l'iPhone ou l'iPad. Je filtre simplement en fonction de ces mots clés.

Dans la mesure du possible, lors de l'ajout de tests Modernizr, vous devez ajouter un test pour une fonctionnalité plutôt qu'un appareil ou un système d'exploitation. Il n'y a rien de mal à ajouter dix tests tous les tests 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 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 «pas de vidéo en page»

Vous pouvez ensuite l'utiliser dans css (Modernizr ajoute une classe .no-inpagevideoà la <html>balise si le test échoue)

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

Cela masquera la vidéo sur iPhone (ce que je fais en fait dans ce cas est de montrer une image alternative avec un onclick 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).

Wow, beaucoup de code délicat et long ici. Restez simple, s'il vous plaît!

Celui-ci est IMHO rapide, enregistre 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);

• Il est rapide parce que les contrôles de la regexp ^ s epuis position de la première chaîne de plate - forme et arrête s'il n'y a pas « iP » (plus rapide que la recherche de la longue série UA jusqu'à la fin de toute façon)
• C'est plus sûr que la vérification UA ​​(en supposant que navigator.platform est moins susceptible d'être truqué)
• Détecte le simulateur iPhone / iPad

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

    const isIOS = [
      'iPad Simulator',
      'iPhone Simulator',
      'iPod Simulator',
      'iPad',
      'iPhone',
      'iPod',
    ].indexOf(navigator.platform) !== -1;

Vous pouvez aussi utiliser includes

  const isApple = ['iPhone', 'iPad', 'iPod'].includes(navigator.platform)

Aucune des réponses précédentes ne fonctionne pour tous les principaux navigateurs sur toutes les versions d'iOS, y compris iOS 13. Voici une solution qui fonctionne pour Safari, Chrome et Firefox pour toutes les versions d'iOS:

var isIOS = (function () {
    var iosQuirkPresent = function () {
        var audio = new Audio();

        audio.volume = 0.5;
        return audio.volume === 1;   // volume cannot be changed from "1" on iOS 12 and below
    };

    var isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
    var isAppleDevice = navigator.userAgent.includes('Macintosh');
    var isTouchScreen = navigator.maxTouchPoints >= 1;   // true for iOS 13 (and hopefully beyond)

    return isIOS || (isAppleDevice && (isTouchScreen || iosQuirkPresent()));
})();

Notez que cet extrait de code a été écrit en priorité sur la lisibilité, pas sur la concision ou les performances.

Explication:

• Si l'agent utilisateur contient l'un des "iPod | iPhone | iPad", alors clairement l'appareil est iOS. Sinon, continuez ...

• Tout autre agent utilisateur qui ne contient pas "Macintosh" n'est pas un appareil Apple et ne peut donc pas être iOS. Sinon, c'est un appareil Apple, alors continuez ...

• S'il maxTouchPointsa une valeur 1supérieure ou égale à, l'appareil Apple a un écran tactile et doit donc être iOS car il n'y a pas de Mac avec écran tactile (bravo à kikiwora pour le mentionner maxTouchPoints). Notez que maxTouchPointsc'est undefinedpour iOS 12 et inférieur, nous avons donc besoin d'une solution différente pour ce scénario ...

• iOS 12 et les versions antérieures ont une bizarrerie qui n'existe pas sous Mac OS. La particularité est que la volumepropriété d'un Audioélément ne peut pas être définie avec succès sur une valeur autre que 1. En effet, Apple n'autorise pas les changements de volume sur l' Audioélément pour les appareils iOS, mais le permet pour Mac OS. Cette bizarrerie peut être utilisée comme méthode de secours finale pour distinguer un appareil iOS d'un appareil Mac OS.

Dans mon cas, l'agent utilisateur n'était pas assez bon car dans l'Ipad, l'agent utilisateur était le même que sous Mac OS, j'ai donc dû faire un mauvais tour:

var mql = window.matchMedia("(orientation: landscape)");

/**
 * If we are in landscape but the height is bigger than width
 */
if(mql.matches && window.screen.height > window.screen.width) {
    // IOS
} else {
    // Mac OS
}

Afin de détecter la version iOS, il faut détruire l'agent utilisateur avec un code Javascript comme celui-ci:

 var res = navigator.userAgent.match(/; CPU.*OS (\d_\d)/);
    if(res) {
        var strVer = res[res.length-1];
        strVer = strVer.replace("_", ".");
        version = strVer * 1;
    }

var isiOSSafari = (navigator.userAgent.match(/like Mac OS X/i)) ? true: false;