javascript - saber - Detectar si el dispositivo es iOS
como saber la version de ios de mi iphone bloqueado (11)
Me pregunto si es posible detectar si un navegador se está ejecutando en iOS, de manera similar a como puede ser detectado 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 en su lugar, pero necesito saber 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 no Flash
Detectando iOS
No soy un fanático de la inhalación de User Agent, pero aquí es cómo 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);
iOS
será true
o false
¿Por qué no MSStream?
Microsoft inyectó la palabra iPhone en el userAgent
de userAgent
de IE11 para intentar engañar a Gmail de alguna manera. Por eso necesitamos excluirlo. Más información sobre esto here y here .
A continuación se muestra el userAgent
IE11 (actualización de Internet Explorer para 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) como iPhone OS 7_0_3 Mac OS X AppleWebKit / 537 (KHTML, como Gecko) Mobile Safari / 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á true
o false
Nota: El usuario o una extensión del navigator.platform
pueden falsificar tanto navigator.userAgent
como navigator.platform
.
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 matchMedia API
que la history API
se introdujo en iOS4 - matchMedia API
en iOS5 - webAudio API
en iOS6 - WebSpeech API
en iOS7, etc.
Nota: el siguiente código no es confiable y se interrumpirá si alguna de estas características de 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'';
}
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");
}
Esto establece la variable _iOSDevice
en verdadero o falso
_iOSDevice = !!navigator.platform.match(/iPhone|iPod|iPad/);
Hay estas pruebas de Modernizr personalizadas: https://gist.github.com/855078
Los agentes de usuario en dispositivos iOS dicen iPhone o iPad en ellos. Yo solo el filtro basado en esas palabras clave.
Para detectar la versión de iOS, uno tiene que destruir el agente de usuario con un código de 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;
}
Si está utilizando Modernizr , puede agregar una prueba personalizada para ello.
No importa qué modo de detección decida usar (userAgent, navigator.vendor o navigator.platform), siempre puede envolverlo para un uso más fácil más adelante.
//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'');
}
Siempre que sea posible, al agregar pruebas de Modernizr, debe agregar una prueba para una característica, en lugar de un dispositivo o sistema operativo. No hay nada de malo en agregar diez pruebas en todas las pruebas para iPhone si eso es lo que se necesita. Algunas cosas simplemente no pueden ser detectadas.
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-inpagevideo
a la etiqueta <html>
si la prueba falla)
.no-inpagevideo video.product-video
{
display: none;
}
Esto ocultará el video en el iPhone (lo que estoy haciendo en este caso es mostrar una imagen alternativa con un solo clic para reproducir el video; simplemente no quiero que se muestre el reproductor de video y el botón de reproducción predeterminados).
Una versión simplificada, fácil de ampliar.
var iOS = [''iPad'', ''iPhone'', ''iPod''].indexOf(navigator.platform) >= 0;
Wow, un montón de código largo y complicado aquí. ¡Que sea sencillo, por favor!
Este es IMHO rápido, ahorre 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 la expresión regular comprueba primero la posición de inicio de ^ ^ de la cadena de la plataforma y se detiene si no hay "iP" (más rápido que buscar la cadena larga de AU hasta el final)
- Es más seguro que la verificación UA (asumiendo que navigator.platform es menos probable que sea falsificado)
- Detecta iPhone / iPad Simulator
var isiOSSafari = (navigator.userAgent.match(/like Mac OS X/i)) ? true: false;