page - html title javascript




Detectar se o dispositivo é iOS (8)

Detectando o iOS

Eu não sou fã de agente do usuário farejando, mas aqui está como você faria isso:

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

Outra maneira é confiar em navigator.platform :

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

iOS será true ou false

Por que não MSStream

A Microsoft injetou a palavra iPhone no userAgent do IE11 para tentar enganar o Gmail de alguma forma. Portanto, precisamos excluí-lo. Mais informações sobre isso here e here .

Abaixo está o userAgent atualizado do IE11 (Internet Explorer para Windows Phone 8.1 Update):

Mozilla / 5.0 (Celular; Windows Phone 8.1; Android 4.0; ARM; Tridente / 7.0; Toque; rv: 11.0; IEMobile / 11.0; NOKIA; Lumia 930) como iPhone OS 7_0_3 Mac OS X AppleWebKit / 537 (KHTML, como o Gecko) Safari para celular / 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: O navigator.userAgent e o navigator.platform podem ser falsificados pelo usuário ou por uma extensão do navegador.

Detectando a versão do iOS

A maneira mais comum de detectar a versão do iOS é analisando-a a partir da string do User Agent . Mas também há inferência de detecção de recurso * ;

Sabemos que a history API foi introduzida no iOS4 - matchMedia API no iOS5 - webAudio API no iOS6 - WebSpeech API no iOS7 e assim por diante.

Nota: O código a seguir não é confiável e será interrompido se algum desses recursos HTML5 for reprovado em uma versão mais recente do iOS. Você foi 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';
}

Eu estou querendo saber se é possível detectar se um navegador está sendo executado no iOS, semelhante a como você pode detectar recursos com Modernizr (embora isso seja, obviamente, a detecção do dispositivo, em vez de detecção de recursos).

Normalmente, eu preferiria a detecção de recursos, mas preciso descobrir se um dispositivo é iOS, pois eles lidam com vídeos de acordo com essa pergunta. A API do YouTube não funciona com dispositivos iPad / iPhone / não Flash


Eu escrevi isso alguns anos atrás, mas eu acredito que ainda 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");

    }

Isso define a variável _iOSDevice como true ou false

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

Os agentes do usuário em dispositivos iOS dizem o iPhone ou o iPad neles. Acabei de filtrar com base nessas palavras-chave.


Se você estiver usando Modernizr , você pode adicionar um teste personalizado para ele.

Não importa qual modo de detecção você decida usar (userAgent, navigator.vendor ou navigator.platform), você sempre pode envolvê-lo para um uso 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');
}

Sempre que possível, ao adicionar testes Modernizr, você deve adicionar um teste para um recurso, em vez de um dispositivo ou sistema operacional. Não há nada de errado com a adição de dez testes em todos os testes para o iPhone, se é isso que é preciso. Algumas coisas simplesmente 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 em linha em uma página da Web, ele abre em tela cheia. Então criei um teste 'no-inpage-video'

Você pode usar isso em css (Modernizr adiciona uma classe .no-inpagevideo à tag <html> se o teste falhar)

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

Isso ocultará o vídeo no iPhone (o que estou realmente fazendo neste caso é mostrar uma imagem alternativa com um onclick para reproduzir o vídeo - não quero que o player de vídeo padrão e o botão de reprodução sejam exibidos).


Uma versão simplificada e fácil de ampliar.

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

var isiOSSafari = (navigator.userAgent.match(/like Mac OS X/i)) ? true: false;





browser-feature-detection