Cómo detectar un dispositivo móvil usando jQuery

Question 1

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

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

Question 2

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 “amigable para dispositivos móviles”. Así que uso CSS Media Queries para mostrar/ocultar elementos según el tamaño de la pantalla.

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

Actualizar por dekin88

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

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

    if (isMobile) {
        //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 dirigirse condicionalmente a diferentes dispositivos, como teléfonos inteligentes y tabletas por separado, si es necesario, sin tener que agregar ningún elemento ficticio en el DOM.

Question 3

Una sola línea simple y efectiva:

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 de @Julian:

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

Question 4

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

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

Question 5

A veces se desea saber qué dispositivo de marca está utilizando 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 excelente, 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/detectando-iphone-ipod-ipad-android-and-blackberry-browser-with-javascript-and-php/

¿Ha sido útil esta solución?