Cómo detectar un dispositivo móvil con jQuery

Hay veces que cuando estamos desarrollando una web necesitamos detectar si nos están visitando con un dispositivo móvil. Es más fácil de lo que crees, sigue leyendo y lo verás.

Detectar un dispositivo móvil solo con Javascript (modo básico)

Sin usar jQuery podemos conseguir una funcionalidad básica de detección de dispositivo gracias al siguiente código Javascript:

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
   console.log('Esto es un dispositivo móvil');
}

De este modo se consulta el agente de usuario y si coincide con el de un dispositivo móvil lo detectará y te permitirá hacer lo que necesites.

Pero no te quedes aquí ¿quieres llegar a identificar qué tipo de dispositivo móvil te visita la web? Entonces te interesa la opción con jQuery.

Detectar el tipo de dispositivo móvil con jQuery (modo avanzado)

Diferenciar si te visita un equipo de escritorio o un dispositivo móvil ya es interesante de por sí, pero si lo que quieres es diferenciar entre Android, iOS, BlackBerry, etc… quien entra en juego es jQuery.

La detección del agente de usuario se hace con este código:

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());
    }
};

El comportamiento según el dispositivo lo haces con el siguiente:

if(isMobile.any()) {
  console.log('Esto es un dispositivo móvil, si especificar cuál');
}

if(isMobile.Android()) {
  console.log('Esto es un dispositivo Android');
}

if(isMobile.BlackBerry()) {
  console.log('Esto es un dispositivo BlackBerry');
}

if(isMobile.iOS()) {
  console.log('Esto es un dispositivo iOS');
}

if(isMobile.Opera()) {
  console.log('Esto es un dispositivo Opera');
}

if(isMobile.Windows()) {
  console.log('Esto es un dispositivo Windows');
}

Detectar el dispositivo sin mirar el agente de usuario (modo alternativo)

Esta otra manera de hacer la detección no se basa en consultar qué navegador se usa, más bien consulta qué evento soporta el navegador, por ejemplo, si soporta el evento «Touch», significará que es un móvil.

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

Puedes ver una demo totalmente funcional del segundo método, usa el modo de emulación de móviles de tu navegador o visítala directamente desde un smartphone o tablet para ver cómo varía de logotipo según la plataforma que uses.

Ver demo Descargar ejemplo

¿Vas a usar alguno de estos métodos de detección? ¿Cuál te gusta más?

Comparte en redes sociales