Mi chiedo se è possibile rilevare se un browser è in esecuzione su iOS, in modo simile a come è possibile rilevare le funzionalità con Modernizr (sebbene questo sia ovviamente il rilevamento dei dispositivi piuttosto che il rilevamento delle funzionalità).

Normalmente preferirei invece il rilevamento delle funzionalità, ma devo scoprire se un dispositivo è iOS a causa del modo in cui gestiscono i video secondo questa domanda L' API di YouTube non funziona con iPad / iPhone / dispositivo non Flash

Rilevamento di iOS

Non sono un fan dello sniffing di User Agent, ma ecco come lo faresti:

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

Un altro modo è fare affidamento su navigator.platform:

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

iOSsarà o trueofalse

Perché non MSStream

Microsoft ha inserito la parola iPhone in IE11 userAgentper cercare di ingannare Gmail in qualche modo. Pertanto dobbiamo escluderlo. Maggiori informazioni su questo qui e qui .

Di seguito è aggiornato IE11 userAgent( aggiornamento di Internet Explorer per Windows Phone 8.1):

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

Aggiungi facilmente più dispositivi, senza utilizzare le espressioni regolari:

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()sarà o trueofalse

Nota: entrambi navigator.userAgente navigator.platformpossono essere simulati dall'utente o da un'estensione del browser.

Rilevamento della versione iOS

Il modo più comune di rilevare la versione di iOS è analizzarla dalla stringa User Agent . Ma c'è anche un'inferenza sul rilevamento delle caratteristiche * ;

Sappiamo per certo che è history APIstato introdotto in iOS4 - matchMedia APIin iOS5 - webAudio APIin iOS6 - WebSpeech APIin iOS7 e così via ...

Nota: il codice seguente non è affidabile e si interromperà se una di queste funzionalità HTML5 è obsoleta in una versione iOS più recente. Sei stato avvertito!

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

Dopo iOS 13 dovresti rilevare i dispositivi iOS in questo modo, poiché iPad non verrà rilevato come dispositivi iOS da vecchi metodi (a causa delle nuove opzioni "desktop", abilitate per impostazione predefinita):

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

La prima condizione per iOS <13 o iPhone o iPad con modalità Desktop disabilitata, la seconda condizione per iPadOS 13 nella configurazione predefinita, poiché si posiziona come Macintosh Intel, ma in realtà è l'unico Macintosh con multi-touch.

Piuttosto un trucco piuttosto che una soluzione reale, ma lavora in modo affidabile per me

PS Come detto prima, probabilmente dovresti aggiungere IE checkup

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

Questo imposta la variabile _iOSDevicesu vero o falso

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

Se stai usando Modernizr , puoi aggiungere un test personalizzato per questo.

Indipendentemente dalla modalità di rilevamento che decidi di utilizzare (userAgent, navigator.vendor o navigator.platform), puoi sempre completarla per un uso più semplice in seguito.

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

Esiste questo test Modernizr personalizzato: https://gist.github.com/855078

Una versione semplificata, facile da estendere.

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

Probabilmente vale la pena rispondere che gli iPad che eseguono iOS 13 saranno navigator.platformimpostati su MacIntel, il che significa che dovrai trovare un altro modo per rilevare i dispositivi iPadOS.

L'ho scritto un paio d'anni fa ma credo che funzioni ancora:

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

    }

Gli user-agent sui dispositivi iOS dicono iPhone o iPad al loro interno. Ho solo filtrato in base a quelle parole chiave.

Ove possibile quando si aggiungono i test di Modernizr, è necessario aggiungere un test per una funzionalità, piuttosto che un dispositivo o un sistema operativo. Non c'è niente di sbagliato nell'aggiungere dieci test tutti i test per iPhone se è quello che serve. Alcune cose non possono essere rilevate.

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

Ad esempio, sull'iPhone (non sull'iPad) il video non può essere riprodotto in linea su una pagina Web, si apre a schermo intero. Quindi ho creato un test "no-inpage-video"

È quindi possibile utilizzare questo in CSS (Modernizr aggiunge una classe .no-inpagevideoal <html>tag se il test fallisce)

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

Questo nasconderà il video su iPhone (quello che sto effettivamente facendo in questo caso è mostrare un'immagine alternativa con un clic per riprodurre il video - non voglio che il lettore video predefinito e il pulsante di riproduzione mostrino).

Wow, un sacco di codice complicato da tempo qui. Mantienilo semplice, per favore!

Questo è IMHO veloce, salva e funziona bene:

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

• E 'veloce, perché i controlli regexp l' ^ s posizione della stringa prima piattaforma tarting e si ferma se non c'è un "IP" (veloce rispetto alla ricerca della stringa UA lunga fino alla fine in ogni caso)
• È più sicuro del controllo UA (supponendo che navigator.platform sia meno probabilmente falsificato)
• Rileva il simulatore iPhone / iPad

Aggiorna leggermente la prima risposta usando un approccio più funzionale.

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

Puoi anche usare includes

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

Nessuna delle risposte precedenti qui funziona per tutti i principali browser su tutte le versioni di iOS, incluso iOS 13. Ecco una soluzione che funziona per Safari, Chrome e Firefox per tutte le versioni di 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()));
})();

Tieni presente che questo frammento di codice è stato scritto con priorità sulla leggibilità, non sulla concisione o sulle prestazioni.

Spiegazione:

• Se il programma utente contiene "iPod | iPhone | iPad", il dispositivo è chiaramente iOS. Altrimenti, continua ...

• Qualsiasi altro agente utente che non contenga "Macintosh" non è un dispositivo Apple e pertanto non può essere iOS. Altrimenti, è un dispositivo Apple, quindi continua ...

• Se maxTouchPointsha un valore 1o superiore, il dispositivo Apple ha un touchscreen e quindi deve essere iOS poiché non ci sono Mac con touchscreen (complimenti a kikiwora per menzionarli maxTouchPoints). Nota che maxTouchPointsè undefinedper iOS 12 e versioni precedenti, quindi abbiamo bisogno di una soluzione diversa per quello scenario ...

• iOS 12 e versioni precedenti hanno una stranezza che non esiste in Mac OS. La stranezza è che la volumeproprietà di un Audioelemento non può essere impostata correttamente su un valore diverso da 1. Questo perché Apple non consente le variazioni di volume Audiosull'elemento per dispositivi iOS, ma per Mac OS. Tale stranezza può essere utilizzata come metodo di fallback finale per distinguere un dispositivo iOS da un dispositivo Mac OS.

Nel mio caso l'agente utente non era abbastanza buono poiché in Ipad l'agente utente era lo stesso di Mac OS, quindi ho dovuto fare un brutto scherzo:

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
}

Per rilevare la versione iOS, è necessario destrutturare l'agente utente con un codice Javascript come questo:

 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;