Detectar telefone Android via Javascript / jQuery

122

Como eu detectaria que o dispositivo em uso é um Android para um site móvel?

Preciso aplicar certos atributos css à plataforma Android.

obrigado

Xavier
fonte

Respostas:

223

Dê uma olhada nisso: http://davidwalsh.name/detect-android

JavaScript:

var ua = navigator.userAgent.toLowerCase();
var isAndroid = ua.indexOf("android") > -1; //&& ua.indexOf("mobile");
if(isAndroid) {
  // Do something!
  // Redirect to Android-site?
  window.location = 'http://android.davidwalsh.name';
}

PHP:

$ua = strtolower($_SERVER['HTTP_USER_AGENT']);
if(stripos($ua,'android') !== false) { // && stripos($ua,'mobile') !== false) {
  header('Location: http://android.davidwalsh.name');
  exit();
}

Edit : Como apontado em alguns comentários, isso funcionará em 99% dos casos, mas alguns casos extremos não são cobertos. Se você precisar de uma solução muito mais avançada e à prova de balas em JS, use platform.js: https://github.com/bestiejs/platform.js

Michael Lumbroso
fonte
5
não se esqueça de verificar também os tablets Android: googlewebmastercentral.blogspot.com/2011/03/…
2
Vale ressaltar que isso nem sempre funciona para dispositivos Android, pois, por exemplo, os agentes de usuário relatados pelos dispositivos Kindle Fire HD não contêm a palavra 'android'.
djbp
3
A abordagem navigator.userAgent não funciona em dispositivos Samsung Galaxy. Não há 'Android' nas especificações do navegador.
AsafK
2
As duas primeiras linhas da solução JS podem ser simplificadas para:var isAndroid = /Android/i.test(navigator.userAgent)
Dave Koo
4
Sua solução não funciona. Aqui está um agente do usuário Nokia Lumia. E adivinha? corresponde como android:Mozilla/5.0 (Mobile; Windows Phone 8.1; Android 4.0; ARM; Trident/7.0; Touch; rv:11.0; IEMobile/11.0; NOKIA; Lumia 625; Orange) like iPhone OS 7_0_3 Mac OS X AppleWebKit/537 (KHTML, like Gecko) Mobile Safari/537
Sam Jason Braddock
2

Acho que a resposta de Michal é a melhor, mas podemos dar um passo adiante e carregar dinamicamente um CSS do Android conforme a pergunta original:

var isAndroid = /(android)/i.test(navigator.userAgent);
if (isAndroid) {
    var css = document.createElement("link");
    css.setAttribute("rel", "stylesheet");
    css.setAttribute("type", "text/css");
    css.setAttribute("href", "/css/android.css");
    document.body.appendChild(css);
}
drlarsen
fonte
1
Por que você deseja fazer isso, enquanto pode usar consultas de mídia? A detecção de dispositivo JS deve ser apenas para aprimoramento, como adicionar um convite para instalar seu aplicativo. A renderização da página nunca deve confiar nela, pois você terá problemas de desempenho e uma experiência horrível de usabilidade.
Camilokawerin 01/04/19
1
@camilokawerin Sua resposta deve ser direcionada ao autor. Eu estava simplesmente fornecendo uma resposta para sua pergunta. Existem casos em que você deseja CSS específico da plataforma. Por exemplo, se você deseja que o estilo visual da interface corresponda ao dispositivo.
drlarsen
2
;(function() {
    var redirect = false
    if (navigator.userAgent.match(/iPhone/i)) {
        redirect = true
    }
    if (navigator.userAgent.match(/iPod/i)) {
        redirect = true
    }
    var isAndroid = /(android)/i.test(navigator.userAgent)
    var isMobile = /(mobile)/i.test(navigator.userAgent)
    if (isAndroid && isMobile) {
        redirect = true
    }
    if (redirect) {
        window.location.replace('jQueryMobileSite')
    }
})()
Phillip Senn
fonte
-3

versão js, ​​também pega o iPad:

var is_mobile = /mobile|android/i.test (navigator.userAgent);
Jonny
fonte
3
Não funciona porque captura muitos dispositivos, não apenas o Android, conforme a pergunta.
NickG
1
Use pelo menos algo como: /android.*(?=mobile)/i.test(navigator.userAgent); para detectar telefone Android. Mas esse regex contém quantificadores "caros"; portanto, a resposta de Philip com 2 testes separados pode ser mais apropriada.
Vadim P.