Me pregunto si es posible detectar si un navegador se está ejecutando en iOS, de forma similar a cómo se puede detectar con Modernizr (aunque esto obviamente es detección de dispositivos en lugar de detección de características).

Normalmente preferiría la detección de funciones, pero necesito averiguar si un dispositivo es iOS debido a la forma en que manejan los videos según esta pregunta La API de YouTube no funciona con iPad / iPhone / dispositivo sin Flash

Detectando iOS

No soy fanático de la detección de agentes de usuario, pero así es como lo haría:

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

Otra forma es confiar en navigator.platform:

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

iOSserá cualquiera trueofalse

¿Por qué no MSStream?

Microsoft inyectó la palabra iPhone en IE11 userAgentpara intentar engañar a Gmail de alguna manera. Por lo tanto, debemos excluirlo. Más información sobre esto aquí y aquí .

A continuación se muestra la actualización de IE11 userAgent( actualización de Internet Explorer para Windows Phone 8.1):

Mozilla / 5.0 (móvil; Windows Phone 8.1; Android 4.0; ARM; Trident / 7.0; Touch; rv: 11.0; IEMobile / 11.0; NOKIA; Lumia 930) como iPhone OS 7_0_3 Mac OS X AppleWebKit / 537 (KHTML, como Gecko) Safari móvil / 537

Agregue fácilmente más dispositivos, sin usar Expresiones regulares:

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()será cualquiera trueofalse

Nota: Tanto navigator.userAgenty navigator.platformpuede ser falsificada por el usuario o una extensión del navegador.

Detectando la versión de iOS

La forma más común de detectar la versión de iOS es analizarla desde la cadena del Agente de usuario . Pero también hay inferencia de detección de características * ;

Sabemos a ciencia cierta que history APIse introdujo en iOS4 , matchMedia APIen iOS5 , webAudio APIen iOS6 , WebSpeech APIen iOS7, etc.

Nota: El siguiente código no es confiable y se romperá si alguna de estas características HTML5 está en desuso en una versión más reciente de iOS. ¡Usted ha sido advertido!

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

Después de iOS 13, debe detectar dispositivos iOS como este, ya que el iPad no se detectará como dispositivos iOS de la forma anterior (debido a las nuevas opciones de "escritorio", habilitadas de forma predeterminada):

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

La primera condición para iOS <13 o iPhone o iPad con el modo de escritorio deshabilitado, la segunda condición para iPadOS 13 en la configuración predeterminada, ya que se posiciona como Macintosh Intel, pero en realidad es el único Macintosh con multitáctil.

Más bien un truco que una solución real, pero funciona de manera confiable para mí

PD Como se dijo anteriormente, probablemente debería agregar el chequeo de IE

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

Esto establece la variable _iOSDeviceen verdadero o falso

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

Si está utilizando Modernizr , puede agregarle una prueba personalizada.

No importa qué modo de detección decida usar (userAgent, navigator.vendor o navigator.platform), siempre puede envolverlo para un uso posterior más fácil.

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

Existen estas pruebas de Modernizr personalizadas: https://gist.github.com/855078

Una versión simplificada y fácil de ampliar.

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

Probablemente valga la pena responder que los iPads con iOS 13 se habrán navigator.platformconfigurado MacIntel, lo que significa que necesitará encontrar otra forma de detectar dispositivos iPadOS.

Escribí esto hace un par de años, pero creo que todavía funciona:

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");

    }

Los agentes de usuario en dispositivos iOS dicen iPhone o iPad en ellos. Acabo de filtrar en función de esas palabras clave.

Siempre que sea posible al agregar pruebas de Modernizr, debe agregar una prueba para una función, en lugar de un dispositivo o sistema operativo. No hay nada de malo en agregar diez pruebas todas las pruebas para iPhone si eso es lo que se necesita. Algunas cosas simplemente no se pueden detectar características.

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

Por ejemplo, en el iPhone (no en el iPad) el video no se puede reproducir en línea en una página web, se abre a pantalla completa. Así que creé una prueba 'no-inpage-video'

Luego puede usar esto en css (Modernizr agrega una clase .no-inpagevideoa la <html>etiqueta si la prueba falla)

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

Esto ocultará el video en iPhone (lo que en realidad estoy haciendo en este caso es mostrar una imagen alternativa con un clic para reproducir el video; simplemente no quiero que se muestre el reproductor de video predeterminado y el botón de reproducción).

Wow, hay un montón de código largo y complicado aquí. ¡Mantenlo simple, por favor!

Este es IMHO rápido, ahorra y funciona 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);

• Es rápido, porque los controles de expresiones regulares de la ^ S posición de la cadena plataforma de primera tarting y se detiene si no hay una "IP" (más rápido que buscar la cadena larga UA hasta el final de todos modos)
• Es más seguro que la comprobación de UA (suponiendo que sea menos probable que falsifique navigator.platform)
• Detecta el simulador de iPhone / iPad

Actualice ligeramente la primera respuesta con un enfoque más funcional.

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

También puedes usar includes

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

Ninguna de las respuestas anteriores aquí funciona para todos los principales navegadores en todas las versiones de iOS, incluido iOS 13. Aquí hay una solución que funciona para Safari, Chrome y Firefox para todas las versiones de 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()));
})();

Tenga en cuenta que este fragmento de código se escribió con prioridad en la legibilidad, no en la concisión o el rendimiento.

Explicación:

• Si el agente de usuario contiene alguno de "iPod | iPhone | iPad", entonces claramente el dispositivo es iOS. De lo contrario, continúe ...

• Cualquier otro agente de usuario que no contenga "Macintosh" no es un dispositivo Apple y, por lo tanto, no puede ser iOS. De lo contrario, es un dispositivo Apple, así que continúe ...

• Si maxTouchPointstiene un valor 1igual o mayor, entonces el dispositivo Apple tiene una pantalla táctil y, por lo tanto, debe ser iOS ya que no hay Mac con pantallas táctiles (felicitaciones a kikiwora por mencionar maxTouchPoints). Tenga en cuenta que maxTouchPointses undefinedpara iOS 12 y versiones inferiores, por lo que necesitamos una solución diferente para ese escenario ...

• iOS 12 y versiones posteriores tienen una peculiaridad que no existe en Mac OS. La peculiaridad es que la volumepropiedad de un Audioelemento no se puede establecer con éxito en ningún valor que no sea 1. Esto se debe a que Apple no permite cambios de volumen en el Audioelemento para dispositivos iOS, pero sí para Mac OS. Esa peculiaridad se puede usar como el método de respaldo final para distinguir un dispositivo iOS de un dispositivo Mac OS.

En mi caso, el agente de usuario no era lo suficientemente bueno, ya que en el Ipad el agente de usuario era el mismo que en Mac OS, por lo tanto, tuve que hacer un truco desagradable:

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
}

Para detectar la versión de iOS, uno tiene que desestructurar el agente de usuario con un código Javascript como este:

 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;