Pregunta ¿Cuál es la mejor forma de detectar un dispositivo móvil en jQuery?


¿Existe alguna manera sólida de detectar si un usuario está utilizando o no un dispositivo móvil en jQuery? ¿Algo similar al atributo CSS @media? Me gustaría ejecutar un script diferente si el navegador está en un dispositivo de mano.

El jQuery $.browser la función no es lo que estoy buscando.


1362


origen


Respuestas:


En lugar de usar jQuery, puede usar JavaScript simple para detectarlo:

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
 // some code..
}

O puede combinarlos para hacerlos más accesibles a través de jQuery ...

$.browser.device = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()));

Ahora $.browser regresará "device" para todos los dispositivos anteriores

Nota: $.browser eliminado en jQuery v1.9.1. Pero puede usar esto mediante el uso del complemento de migración jQuery Código


Una versión más completa:

var isMobile = false; //initiate as false
// device detection
if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent) 
    || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0,4))) { 
    isMobile = true;
}

1732



Para mí, lo pequeño es hermoso, así que estoy usando esta técnica:

En el archivo CSS:

/* Smartphones ----------- */
@media only screen and (max-width: 760px) {
  #some-element { display: none; }
}

En el archivo jQuery / JavaScript:

$( document ).ready(function() {      
    var is_mobile = false;

    if( $('#some-element').css('display')=='none') {
        is_mobile = true;       
    }

    // now i can use is_mobile to run javascript conditionally

    if (is_mobile == true) {
        //Conditional script here
    }
 });

Mi objetivo era hacer que mi sitio fuera "amigable para dispositivos móviles". Así que uso CSS Media Queries mostrar / ocultar elementos en función del tamaño de la pantalla.

Por ejemplo, en mi versión móvil no quiero activar Facebook Like Box, porque carga todas esas imágenes de perfil y esas cosas. Y eso no es bueno para los visitantes móviles. Entonces, además de ocultar el elemento contenedor, también hago esto dentro del bloque de código jQuery (arriba):

if(!is_mobile) {
    (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/pt_PT/all.js#xfbml=1&appId=210731252294735";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
}

Puedes verlo en acción en http://lisboaautentica.com

Todavía estoy trabajando en la versión móvil, por lo que todavía no está buscando como debería, al momento de escribir esto.

Actualizar por dekin88

Hay una API de JavaScript integrada para detectar medios. En lugar de utilizar la solución anterior, simplemente use lo siguiente:

$( document ).ready(function() {      
    var isMobile = window.matchMedia("only screen and (max-width: 760px)");

    if (isMobile.matches) {
        //Conditional script here
    }
 });

Soportes del navegador:  http://caniuse.com/#feat=matchmedia

La ventaja de este método es que no solo es más simple y más corto, sino que también puede apuntar de manera condicional a diferentes dispositivos como teléfonos inteligentes y tabletas si es necesario sin tener que agregar ningún elemento ficticio en el DOM.


411



De acuerdo a Mozilla: detección del navegador utilizando el agente de usuario:

En resumen, recomendamos buscar la cadena "Mobi" en cualquier lugar del Agente de usuario para detectar un dispositivo móvil.

Me gusta esto:

if (/Mobi/.test(navigator.userAgent)) {
    // mobile!
}

Esto coincidirá con todos los agentes de usuario comunes del navegador móvil, incluidos los dispositivos móviles Mozilla, Safari, IE, Opera, Chrome, etc.

Actualización para Android

EricL recomienda realizar pruebas para Android como agente de usuario también, como Cadena de agente de usuario de Chrome para tabletas no incluye "Mobi" (sin embargo, las versiones de teléfono lo hacen):

if (/Mobi|Android/i.test(navigator.userAgent)) {
    // mobile!
}

176



Lo que está haciendo al querer detectar un dispositivo móvil es acercarse demasiado a un concepto de "búsqueda de navegador" OMI. Probablemente sería mucho mejor hacer alguna detección de características. Bibliotecas como http://www.modernizr.com/ puede ayudar con eso.

Por ejemplo, ¿dónde está la línea entre móvil y no móvil? Se vuelve más y más borroso todos los días.


74



Un simple y efectivo delineador:

function isMobile() { return ('ontouchstart' in document.documentElement); }

Sin embargo, el código anterior no tiene en cuenta el caso de las computadoras portátiles con pantalla táctil. Por lo tanto, proporciono esta segunda versión, basada en @Julian solución:

function isMobile() {
  try{ document.createEvent("TouchEvent"); return true; }
  catch(e){ return false; }
}

72



No es jQuery, pero encontré esto: http://detectmobilebrowser.com/

Proporciona scripts para detectar navegadores móviles en varios idiomas, uno de los cuales es JavaScript. Eso puede ayudarte con lo que estás buscando.

Sin embargo, dado que está utilizando jQuery, es posible que desee conocer la colección jQuery.support. Es una colección de propiedades para detectar las capacidades del navegador actual. La documentación está aquí: http://api.jquery.com/jQuery.support/

Como no sé qué es exactamente lo que intentas lograr, no sé cuál de ellos será el más útil.

Dicho todo esto, creo que su mejor opción es redirigir o escribir un script diferente a la salida usando un lenguaje del lado del servidor (si esa es una opción). Como no conoce realmente las capacidades de un navegador móvil x, la detección y la lógica de alteración en el servidor serían el método más confiable. Por supuesto, todo eso es un punto discutible si no puedes usar un lenguaje del lado del servidor :)


59



A veces es deseable saber qué dispositivo de marca está usando un cliente para mostrar contenido específico de ese dispositivo, como un enlace a la tienda de iPhone o al mercado de Android. Modernizer es genial, pero solo muestra las capacidades del navegador, como HTML5 o Flash.

Aquí está mi solución UserAgent en jQuery para mostrar una clase diferente para cada tipo de dispositivo:

/*** sniff the UA of the client and show hidden div's for that device ***/
var customizeForDevice = function(){
    var ua = navigator.userAgent;
    var checker = {
      iphone: ua.match(/(iPhone|iPod|iPad)/),
      blackberry: ua.match(/BlackBerry/),
      android: ua.match(/Android/)
    };
    if (checker.android){
        $('.android-only').show();
    }
    else if (checker.iphone){
        $('.idevice-only').show();
    }
    else if (checker.blackberry){
        $('.berry-only').show();
    }
    else {
        $('.unknown-device').show();
    }
}

Esta solución es de Graphics Maniacs http://graphicmaniacs.com/note/detecting-iphone-ipod-ipad-android-and-blackberry-browser-with-javascript-and-php/


45



Encontré una solución en: http://www.abeautifulsite.net/blog/2011/11/detecting-mobile-devices-with-javascript/.

var isMobile = {
    Android: function() {
        return navigator.userAgent.match(/Android/i);
    },
    BlackBerry: function() {
        return navigator.userAgent.match(/BlackBerry/i);
    },
    iOS: function() {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i);
    },
    Opera: function() {
        return navigator.userAgent.match(/Opera Mini/i);
    },
    Windows: function() {
        return navigator.userAgent.match(/IEMobile/i);
    },
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    }
};

Y luego para verificar si es un Móvil, puede probar usando:

if(isMobile.any()) {
   //some code...
}

39



Si con "móvil" te refieres a "pantalla pequeña", uso esto:

var windowWidth = window.screen.width < window.outerWidth ?
                  window.screen.width : window.outerWidth;
var mobile = windowWidth < 500;

En el iPhone terminarás con un window.screen.width de 320. En Android terminarás con un window.outerWidth de 480 (aunque eso puede depender del Android). Los iPads y las tabletas Android devolverán números como 768 para que tengan la vista completa como te gustaría.


18



Si utiliza Modernizr, Es muy fácil de usar Modernizr.touch como se mencionó anteriormente.

Sin embargo, prefiero usar una combinación de Modernizr.touch y pruebas de agente de usuario, solo para estar seguro.

var deviceAgent = navigator.userAgent.toLowerCase();

var isTouchDevice = Modernizr.touch || 
(deviceAgent.match(/(iphone|ipod|ipad)/) ||
deviceAgent.match(/(android)/)  || 
deviceAgent.match(/(iemobile)/) || 
deviceAgent.match(/iphone/i) || 
deviceAgent.match(/ipad/i) || 
deviceAgent.match(/ipod/i) || 
deviceAgent.match(/blackberry/i) || 
deviceAgent.match(/bada/i));

if (isTouchDevice) {
        //Do something touchy
    } else {
        //Can't touch this
    }

Si no usa Modernizr, simplemente puede reemplazar el Modernizr.touch función anterior con ('ontouchstart' in document.documentElement)

También tenga en cuenta que probar el agente de usuario iemobile le dará una gama más amplia de dispositivos móviles detectados de Microsoft que Windows Phone.

Ver también esta pregunta SO


14