Saltar al contenido

Detectar Dispositivo Móvil con Javascript

Valora este articulo.

En este artículo, le mostraré cómo usar mobile-detect.js para detectar el dispositivo móvil del usuario con solo unas pocas líneas de javascript. mobile-detect.js también puede detectar el sistema operativo y el navegador web actual que utiliza el visitante. ¡Vamos a ver!

Cadena UserAgent

La forma básica y sencilla de detectar el dispositivo móvil del usuario es mirar la cadena de userAgent y escribir una expresión de verificación condicional para extraer la información de esta manera.

if( navigator.userAgent.match(/Android/i)
 || navigator.userAgent.match(/webOS/i)
 || navigator.userAgent.match(/iPhone/i)
 || navigator.userAgent.match(/iPad/i)
 || navigator.userAgent.match(/iPod/i)
 || navigator.userAgent.match(/BlackBerry/i)
 || navigator.userAgent.match(/Windows Phone/i)
alert("You're using Mobile Device!!")

Mobile-detect.js utiliza el mismo método pero también proporciona funciones de API para recuperar esa información fácilmente.

Aquí está la demostración oficial de que uso una consola de desarrollador para emular los dispositivos móviles.

Cómo utilizar

Implementar mobile-detect.js es muy fácil. Solo importa la biblioteca a tu página, luego pasa la cadena userAgent al constructor.

var detector = new MobileDetect(window.navigator.userAgent)

Desde el objeto de detección móvil, puede utilizar varios métodos para recuperar la información de esta manera. También puede detectar sistemas operativos usando os () y detectar el navegador web usando userAgent ().

console.log( "Mobile: " + detector.mobile());
console.log( "Phone: " + detector.phone());
console.log( "Tablet: " + detector.tablet());
console.log( "OS: " + detector.os());
console.log( "userAgent: " + detector.userAgent());

El método phone () devolverá el valor nulo si el usuario está usando la tableta.

Del mismo modo, el método de la tableta () devolverá un valor nulo si el usuario está utilizando un teléfono móvil.

El método móvil () muestra el resultado del método del teléfono () o de la tableta (). Todos ellos serán nulos si el usuario está utilizando Desktop.

Véalo en acción en nuestro vídeo a continuación.

Código fuente

<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <script src="jquery-2.1.4.js"></script>
  <script src="mobile-detect.js"></script>
  <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>
  <div id="navbar"><span>Mobile-detect.js</span></div>
  <div id="wrapper">
    <button id="detect-button">Detect Device</button>
  </div>
  
  <script>
          $('#detect-button').click(function(){
            
            var detector = new MobileDetect(window.navigator.userAgent)
            console.log( "Mobile: " + detector.mobile());
            console.log( "Phone: " + detector.phone());
            console.log( "Tablet: " + detector.tablet());
            console.log( "OS: " + detector.os());
            console.log( "userAgent: " + detector.userAgent());
            
          });
  </script>
  </body>
</html>
Comparte

Loading...