Saltar al contenido

Detectar Dispositivo Móvil con Javascript

¿Necesitas un código HTML para detectar dispositivos móviles? 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 (navigator.useragent.match) 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.

Te puede interesar:   ¿Qué es Vanilla JS?

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

detectar dispositivo móvil JavaScript
detectar dispositivo móvil JavaScript

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.

detectar sistema operativo javascript
detectar sistema operativo JavaScript

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

Te puede interesar:   5 Formularios Login CSS para embellecer su sitio
javascript detectar dispositivo
JavaScript detectar dispositivo

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.

detectar tipo de dispositivo javascript
detectar tipo de dispositivo javascript

Tutorial detectar dispositivo JavaScript

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>

Además de este tutorial JavaScript detectar móvil, en nuestro sitio web también tenemos:

Te puede interesar:   Lenguajes de Programación Sentenciados a muerte
Cómo hacer un sistema de inventario en php y MySQL
Crear archivo txt JavaScript
Obtener latitud y longitud JavaScript
Sistema de facturación php
Gif de carga

 

5/5 (1 Review)
Comparte