Detectar se o dispositivo é o iOS
estou a pensar se é possível detectar se um navegador está a correr no iOS, semelhante à forma como pode detectar com o Modernizr (embora isto seja obviamente detecção de dispositivos em vez de detecção de funcionalidades).
Normalmente, eu seria a favor funcionalidade de detecção em vez disso, mas eu preciso descobrir se um dispositivo iOS devido à forma como eles lidam com vídeos de acordo com esta pergunta API do YouTube não funciona com iPad / iPhone / não-dispositivo Flash
11 answers
A detectar iOS
Não sou fã de agentes que cheiram, mas é assim que se faz.var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
navigator.platform:
var iOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);
iOS será true ou false
Porque não MSStream
A Microsoft injectou o word iPhone no ie11's userAgent para tentar enganar o Gmail de alguma forma. Por conseguinte, temos de a excluir. Mais informações sobre isso aquie aqui.
Abaixo está o IE11. updated userAgent (Internet Explorer for Windows Phone 8.1 Update):
Mozilla/5.0 (Mobile; Windows Phone 8.1; Android 4.0; ARM; Trident / 7.0; Toque; rv:11.0; IEMobile/11.0; NOKIA; Lumia 930) como o iPhone OS 7_0_3 Mac OS X AppleWebKit / 537 (KHTML, como Gecko) Mobile Safari / 537
Adicione facilmente mais dispositivos, sem usar expressões 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 ou false
Nota: ambos navigator.userAgent e navigator.platform podem ser falsificado pelo utilizador ou por uma extensão do navegador.
A detectar a versão iOS
A forma mais comum de detectar a versão iOS é processando-a a partir da cadeia de agentes do utilizador . Mas também há recursodetecção inferência*;
Sabemos que para um fato que history API foi introduzido no iOS4 - matchMedia API em iOS5 - webAudio API em iOS6 - WebSpeech API em iOS7 e assim por diante..
Nota: O seguinte código não é confiável e vai quebrar se algum destes recursos HTML5 é depreciado em uma versão mais recente do iOS. Foste avisado!
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 estiver a utilizar Modernizr , pode adicionar um teste personalizado para ele.
Não importa qual o modo de detecção que você decide usar (agente de utilizador, navegador.vendedor ou navegador.plataforma), você pode sempre embrulhá-lo para uma utilização mais fácil mais tarde.
//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');
}
Isto define a variável _iOSDevice para verdadeiro ou falso
_iOSDevice = !!navigator.platform.match(/iPhone|iPod|iPad/);
Uma versão simplificada e fácil de estender.
var iOS = ['iPad', 'iPhone', 'iPod'].indexOf(navigator.platform) >= 0;
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");
}
Sempre que possível ao adicionar testes Modernizr, deve adicionar um teste para uma funcionalidade, em vez de um dispositivo ou sistema operativo. Não há nada de errado em Adicionar dez testes todos os testes para iPhone, SE é isso que é preciso. Algumas coisas não podem ser detectadas.
Modernizr.addTest('inpagevideo', function ()
{
return navigator.userAgent.match(/(iPhone|iPod)/g) ? false : true;
});
Por exemplo, no iPhone (não no iPad), o vídeo não pode ser reproduzido online numa página web, ele abre o ecrã completo. Então eu criei um teste 'no-inpage-video'
Você pode então usar isso em css (Modernizr adiciona um classe .no-inpagevideo à etiqueta <html> Se o teste falhar.
.no-inpagevideo video.product-video
{
display: none;
}
Isto irá esconder o vídeo no iPhone (o que estou realmente a fazer neste caso é mostrar uma imagem alternativa com um onclick para reproduzir o vídeo - só não quero que o leitor de vídeo e o botão de reprodução predefinidos mostrem).
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);
- é rápido porque a expressão regular verifica a ^s posição de alcatrão da cadeia de plataforma primeiro e pára se não houver " iP "(mais rápido do que procurar a cadeia de UA longa até ao fim de qualquer forma) {[[10]} É mais seguro do que verificar em UA (assumindo navegador).plataforma é menos provável falsificada)
- detecta iPhone / iPad Simulador
Para detectar a versão iOS, é preciso destruir o agente de utilizador com um 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;