javascript dispositivos moviles - ¿Cuál es la mejor manera de detectar un dispositivo móvil en jQuery?





15 Answers

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 tener mi sitio "compatible con dispositivos móviles". Así que uso CSS Media Queries para mostrar / ocultar elementos dependiendo del tamaño de la pantalla.

Por ejemplo, en mi versión móvil no quiero activar el Facebook Like Box, ya que 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 se ve como debería, al momento de escribir esto.

Actualización por dekin88

Hay una API de JavaScript incorporada para detectar medios. En lugar de usar 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 a diferentes dispositivos, como teléfonos inteligentes y tabletas por separado, si es necesario, sin tener que agregar ningún elemento ficticio al DOM.

css html tablet

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

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




Un sencillo y eficaz de una sola línea:

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 la solución @Julian :

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



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 estás tratando de lograr, no sé cuál de estos será el más útil.

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




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, puedes probar usando:

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



Si usa Modernizr , es muy fácil 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 la función Modernizr.touch anterior con ('ontouchstart' in document.documentElement)

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

También vea esta pregunta SO




Si no está especialmente preocupado por las pantallas pequeñas, puede utilizar la detección de ancho / altura. De esa manera, si el ancho está por debajo de un tamaño determinado, se lanza el sitio móvil. Puede que no sea la forma perfecta, pero probablemente será la más fácil de detectar para múltiples dispositivos. Es posible que deba colocar uno específico para el iPhone 4 (resolución grande).




No puede confiar en navigator.userAgent , no todos los dispositivos revelan su sistema operativo real. En mi HTC, por ejemplo, depende de la configuración ("uso de la versión móvil" activado / desactivado). En http://my.clockodo.com , simplemente usamos screen.width para detectar dispositivos pequeños. Desafortunadamente, en algunas versiones de Android hay un error con screen.width. Puedes combinar de esta manera con el userAgent:

if(screen.width < 500 ||
 navigator.userAgent.match(/Android/i) ||
 navigator.userAgent.match(/webOS/i) ||
 navigator.userAgent.match(/iPhone/i) ||
 navigator.userAgent.match(/iPod/i)) {
alert("This is a mobile device");
}



Para agregar una capa adicional de control, uso el almacenamiento HTML5 para detectar si está usando almacenamiento móvil o de escritorio. Si el navegador no admite almacenamiento, tengo una matriz de nombres de navegadores móviles y comparo el agente de usuario con los navegadores de la matriz.

Es bastante simple. Aquí está la función:

// Used to detect whether the users browser is an mobile browser
function isMobile() {
    ///<summary>Detecting whether the browser is a mobile browser or desktop browser</summary>
    ///<returns>A boolean value indicating whether the browser is a mobile browser or not</returns>

    if (sessionStorage.desktop) // desktop storage 
        return false;
    else if (localStorage.mobile) // mobile storage
        return true;

    // alternative
    mobile = ['iphone','ipad','android','blackberry','nokia','opera mini','windows mobile','windows phone','iemobile','tablet','mobi']; 
    var ua=navigator.userAgent.toLowerCase();
    for (var i in mobile) if (ua.indexOf(mobile[i]) > -1) return true;

    // nothing found.. assume desktop
    return false;
}



Aquí hay una función que puede usar para obtener una respuesta verdadera / falsa sobre si está ejecutando en un navegador móvil. Sí, es un rastreo del navegador, pero a veces eso es exactamente lo que necesitas.

function is_mobile() {
    var agents = ['android', 'webos', 'iphone', 'ipad', 'blackberry'];
    for(i in agents) {
        if(navigator.userAgent.match('/'+agents[i]+'/i')) {
            return true;
        }
    }
    return false;
}



Yo sugeriría usar el siguiente combo de cadenas, para verificar si se usa el tipo de dispositivo.

Según la cadena de documentación de Mozilla, se recomienda Mobi .Pero, algunas de las tabletas antiguas no se vuelven verdaderas si solo Mobise usan, por lo tanto, también deberíamos usar Tabletcadenas.

De manera similar, para estar en el lado seguro iPady las iPhonecadenas también se podrían usar para verificar el tipo de dispositivo.

La mayoría de los nuevos dispositivos volverían solo truepara la Mobicadena.

if (/Mobi|Tablet|iPad|iPhone/.test(navigator.userAgent)) {
    // do something
}



Utilizar esta:

/**  * jQuery.browser.mobile (http://detectmobilebrowser.com/)  * jQuery.browser.mobile will be true if the browser is a mobile device  **/ (function(a){jQuery.browser.mobile=/android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/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|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|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|xda(\-|2|g)|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))})(navigator.userAgent||navigator.vendor||window.opera);

Entonces usa esto:

if(jQuery.browser.mobile)
{
   console.log('You are using a mobile device!');
}
else
{
   console.log('You are not using a mobile device!');
}



Todas las respuestas utilizan user-agent para detectar el navegador, pero la detección de dispositivos basada en user-agent no es una buena solución, mejor es detectar características como dispositivos táctiles (en el nuevo jQuery se eliminan $.browsery usan $.support)

Para detectar móviles puedes verificar eventos táctiles:

function is_touch_device() {
  return 'ontouchstart' in window // works on most browsers 
      || 'onmsgesturechange' in window; // works on ie10
}

Tomado de ¿Cuál es la mejor manera de detectar un dispositivo de 'pantalla táctil' utilizando JavaScript?




<script>
  function checkIsMobile(){
      if(navigator.userAgent.indexOf("Mobile") > 0){
        return true;
      }else{
        return false;
      }
   }
</script>

Si vas a cualquier navegador y si intentas obtener navigator.userAgent, entonces obtendremos la información del navegador como sigue

Mozilla / 5.0 (Macintosh; Intel Mac OS X 10_13_1) AppleWebKit / 537.36 (KHTML, como Gecko) Chrome / 64.0.3282.186 Safari / 537.36

Lo mismo si lo haces en móvil lo estarás siguiendo.

Mozilla / 5.0 (Linux; Android 8.1.0; Pixel Build / OPP6.171019.012) AppleWebKit / 537.36 (KHTML, como Gecko) Chrome / 61.0.3163.98 Mobile Safari / 537.36

Cada navegador móvil tendrá un agente de usuario con una cadena que contenga "Móvil". Por lo tanto, estoy usando el fragmento de código anterior en mi código para verificar si el agente del usuario actual es web / móvil. Basado en el resultado estaré haciendo los cambios requeridos.




¿Qué hay de mobiledetect.net ?

Otras soluciones parecen demasiado básicas. Esta es una clase de PHP ligero. Utiliza la cadena User-Agent combinada con encabezados HTTP específicos para detectar el entorno móvil. También puede beneficiarse de Mobile Detect utilizando cualquiera de los complementos de terceros disponibles para: WordPress, Drupal, Joomla, Magento, etc.




Si se encuentra que solo el chequeo navigator.userAgentno siempre es confiable. Mayor confiabilidad se puede lograr también mediante la comprobación navigator.platform. Una simple modificación de una respuesta anterior parece funcionar mejor:

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



Related