Rileva se il dispositivo è iOS

Mi chiedo se sia ansible rilevare se un browser è in esecuzione su iOS, in modo simile a come è ansible rilevare le funzioni con Modernizr (sebbene si tratti ovviamente del rilevamento dei dispositivi piuttosto che del rilevamento delle funzioni).

Normalmente preferirei invece il rilevamento delle funzioni, ma ho bisogno di scoprire se un dispositivo è iOS a causa del modo in cui gestiscono i video come da questa domanda YouTube API non funziona con iPad / iPhone / dispositivo non Flash

Rilevamento di iOS

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

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

Un altro modo è affidarsi a navigator.platform :

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

iOS sarà o true o false

Perché non MSStream

Microsoft ha iniettato la parola iPhone in userAgent di userAgent per cercare di ingannare Gmail in qualche modo. Quindi dobbiamo escluderlo. Maggiori informazioni su questo qui e qui .

Di seguito è riportato l’account userAgent aggiornato di userAgent (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à true o false

Nota: navigator.userAgent e navigator.platform possono essere falsificati dall’utente o dall’estensione del browser.


Rilevamento della versione di iOS

Il modo più comune per rilevare la versione di iOS è analizzarlo dalla stringa User Agent . Ma c’è anche l’ inferenza di rilevamento delle funzioni * ;

Sappiamo per matchMedia API che l’ history API stata introdotta in iOS4matchMedia API in iOS5webAudio API webAudio in iOS6WebSpeech API WebSpeech in iOS7 e così via.

Nota: il seguente codice non è affidabile e si interromperà se qualcuna di queste funzionalità HTML5 è deprecata 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'; } 

Se si utilizza Modernizr , è ansible aggiungere un test personalizzato per questo.

Non importa quale modalità di rilevamento decidi di utilizzare (userAgent, navigator.vendor o navigator.platform), puoi sempre completarla in un secondo momento.

 //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

Questo imposta la variabile _iOSDevice su true o false

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

Gli user-agent su dispositivi iOS dicono iPhone o iPad al loro interno. Mi limito a filtrare in base a quelle parole chiave.

Una versione semplificata, facile da estendere.

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

Ho scritto questo un paio di 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"); } 

Ove ansible, quando si aggiungono i test Modernizr, è necessario aggiungere un test per una funzionalità piuttosto che un dispositivo o un sistema operativo. Non c’è niente di sbagliato nell’aggiunta di dieci test tutti 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 su iPhone (non su iPad) il video non può essere riprodotto in linea su una pagina Web, ma si apre a schermo intero. Così ho creato un test ‘no-inpage-video’

Puoi quindi usarlo in css (Modernizr aggiunge una class .no-inpagevideo al tag se il test fallisce)

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

Ciò nasconderà il video su iPhone (quello che sto facendo in questo caso sta mostrando un’immagine alternativa con un onclick per riprodurre il video: non voglio che il video player e il pulsante di riproduzione predefiniti vengano visualizzati).

Per rilevare la versione di 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;