Detectar si el dispositivo es iOS
Me pregunto si es posible detectar si un navegador se está ejecutando en iOS, de forma similar a cómo se puede detectar funciones con Modernizr (aunque obviamente se trata de detección de dispositivos en lugar de detección de funciones).
Normalmente, preferiría la detección de funciones, 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 sin Flash.
Detectando iOS
Con iOS 13 iPad, tanto el agente de usuario como las cadenas de plataforma cambian y parece posible diferenciar entre iPad y MacOS , por lo que todas las respuestas a continuación deben tener eso en cuenta ahora.
Esta podría ser la alternativa más corta que también cubra iOS 13:
function iOS() {
return [
'iPad Simulator',
'iPhone Simulator',
'iPod Simulator',
'iPad',
'iPhone',
'iPod'
].includes(navigator.platform)
// iPad on iOS 13 detection
|| (navigator.userAgent.includes("Mac") && "ontouchend" in document)
}
iOSserá cualquiera trueofalse
Peor opción: agente de usuario olfateando
El rastreo de agentes de usuario es más peligroso y los problemas aparecen con frecuencia.
En iPad iOS 13, el agente de usuario es idéntico al de una computadora MacOS 13 , pero si ignora los iPads, esto podría funcionar todavía por un tiempo:
var iOS = !window.MSStream && /iPad|iPhone|iPod/.test(navigator.userAgent); // fails on iPad iOS 13
La !window.MSStreamfinalidad es no detectar incorrectamente IE11, consulte aquí y aquí .
Nota: Ambos navigator.userAgenty navigator.platformpueden ser falsificados por el usuario o por una extensión del navegador.
Las extensiones del navegador para cambiar el agente de usuario o la plataforma existen porque los sitios web utilizan una detección demasiado estricta y, a menudo, desactivan algunas funciones incluso si el navegador del usuario podría usar esa función.
Para reducir este conflicto con los usuarios se recomienda detectar específicamente para cada caso las características exactas que su sitio web necesita. Luego, cuando el usuario obtenga un navegador con la función necesaria, ya funcionará sin cambios de código adicionales.
Detectando la versión de iOS
La forma más común de detectar la versión de iOS es analizándola a partir de la cadena del Agente de usuario . Pero también existe la inferencia de detección de características * ;
Sabemos con certeza 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 dañará si alguna de estas funciones HTML5 queda obsoleta en una versión más reciente de iOS. ¡Usted ha sido advertido!
function iOSversion() {
if (iOS) { // <-- Use the one here above
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 deberías detectar dispositivos iOS como este, ya que el iPad no será detectado como dispositivo iOS de la manera antigua (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 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 antes, probablemente deberías agregar el chequeo de IE
let isIOS = (/iPad|iPhone|iPod/.test(navigator.platform) ||
(navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)) &&
!window.MSStream
