¿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!
Detectar Dispositivo Móvil con Javascript
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.
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.
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:
| 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 |