Detectar teléfono Android a través de Javascript / jQuery

122

¿Cómo detectaría que el dispositivo en uso es un Android para un sitio web móvil?

Necesito aplicar ciertos atributos de CSS a la plataforma Android.

Gracias

javascript jquery android Javier
fuente

Respuestas:

223

Echa un vistazo a eso: 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();
}

Editar : como se señaló en algunos comentarios, esto funcionará en el 99% de los casos, pero algunos casos extremos no están cubiertos. Si necesita una solución mucho más avanzada y a prueba de balas en JS, debe usar platform.js: https://github.com/bestiejs/platform.js

Michael Lumbroso
fuente
55
no olvides buscar también tabletas Android: googlewebmastercentral.blogspot.com/2011/03/…
2
Vale la pena señalar que esto no siempre funciona para dispositivos Android, ya que, por ejemplo, los agentes de usuario que informan los dispositivos Kindle Fire HD no contienen la palabra 'android' en absoluto.
djbp
3
El enfoque navigator.userAgent no funciona en dispositivos Samsung Galaxy. No hay 'Android' en las especificaciones del navegador.
AsafK
2
Las dos primeras líneas de la solución JS se pueden simplificar a:var isAndroid = /Android/i.test(navigator.userAgent)
Dave Koo
44
Tu solución no funciona. Aquí hay un agente de usuario de Nokia Lumia. ¿Y adivina qué? coincide 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

Creo que la respuesta de Michal es la mejor, pero podemos ir un paso más allá y cargar dinámicamente un CSS de Android según la pregunta 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
fuente
1
¿Por qué querrías hacer eso, mientras puedes usar consultas de medios? La detección de dispositivos JS debe ser solo para mejorar, como agregar una invitación para instalar su aplicación. La representación de la página nunca debe depender de ella porque tendrá problemas de rendimiento y una experiencia de uso horrible.
camilokawerin 01 de
1
@camilokawerin Su respuesta debe dirigirse al autor. Simplemente estaba dando una respuesta a su pregunta. Sin embargo, hay casos en los que desea CSS específico de la plataforma. Por ejemplo, si desea que el estilo visual de la interfaz coincida con el dispositivo.
drlarsen 05 de
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
fuente
-3

versión js, atrapa iPad también:

var is_mobile = /mobile|android/i.test (navigator.userAgent);
jonny
fuente
3
No funciona porque atrapa muchos dispositivos, no solo Android como lo requiere la pregunta.
NickG
1
Utilice al menos algo como esto: /android.*(?=mobile)/i.test(navigator.userAgent); para detectar teléfono Android. Pero esta expresión regular contiene cuantificadores "caros", por lo que la respuesta de Philip con 2 pruebas separadas puede ser más apropiada.
Vadim P.