Es posible que tengas un sitio web y que te estés preguntando cómo detectar un dispositivo móvil en JavaScript. Se trata de una pregunta interesante, ya que identificar a los usuarios que acceden a tu sitio web mediante dispositivos móviles te permitirá adaptar el comportamiento de tu sitio web a estos usuarios.
En este artículo te cuento todo lo que debes saber al respecto.
¡Empecemos!
Índice de contenidos
- 1 ¿Es posible detectar dispositivos móviles con JavaScript?
- 2 Detectar navegadores de dispositivos móviles con JavaScript
- 3 Detectar un dispositivo móvil en JavaScript mediante los píxeles de pantalla
- 4 Ejemplo de uso: ventana emergente JavaScript para dispositivos móviles
- 5 Detectar un dispositivo móvil con JavaScript: Conclusiones
¿Es posible detectar dispositivos móviles con JavaScript?
En primer lugar, es necesario saber si es posible detectar el acceso mediante dispositivos móviles a una web empleando JavaScript. La respuesta es que sí, pero de forma indirecta. Es decir, es posible identificar el navegador o el tamaño de pantalla del usuario. Con esos datos, es posible deducir si está usando un dispositivo móvil.
Sabiendo que es posible, debes tener en cuenta que será necesario que tengas unos conocimientos mínimos sobre el sistema de archivos de tu sitio web, cómo y dónde añadir el código JavaScript y cómo emplear un navegador web para comprobar que se está ejecutando sin errores.
Teniendo lo anterior en cuenta, en los siguientes puntos te enseño a detectar dispositivos móviles con JavaScript.
En primer lugar, te voy a enseñar a identificar el navegador con el que el usuario accede al sitio web. Ello te será muy útil para detectar si está empleando un ordenador o un dispositivo móvil.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
console.log("Datos sobre el navegador:");
let navegador = navigator.userAgent;
console.log(navegador);
</script>
</body>
</html>JavaScript dispone de una propiedad que permite conocer las características del navegador que está empleando el usuario a la hora de acceder al sitio web. Esta propiedad es navigator.userAgent y se puede usar de forma muy sencilla, como te muestro en el código HTML.
Si no entiendes qué es la función console.log() o cómo se declara una variable en JavaScript, no te preocupes. Puedes copiar el código en un archivo abierto con cualquier editor de texto (como el bloc de notas), guardarlo con extensión .html y abrirlo con un navegador. Posteriormente, abre el inspector de elementos (clic derecho + inspeccionar) y accede a la consola. Verás que se muestran el texto «Datos sobre el navegador:» y la información del navegador del usuario.
Con esta función ya tienes la información sobre el navegador del usuario. En el siguiente punto te enseño cómo hacer uso de ella para determinar si un navegador pertenece a dispositivos móviles.
Función match para detectar un dispositivo móvil con JavaScript
Gracias a al uso conjunto de la función .match y la propiedad navigator.userAgent, podrás comprobar si entre los datos del navegador se encuentran las palabras «Android», iPhone, iPad y otras propias de navegadores de dispositivos móviles.
Empleando el siguiente código, podremos detectar los dispositivos móviles mediante JavaScript en la inmensa mayoría de los casos:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documento</title>
</head>
<body>
<script>
let navegador = navigator.userAgent;
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)) {
console.log("Estás usando un dispositivo móvil!!");
} else {
console.log("No estás usando un móvil");
}
</script>
</body>
</html>
Lo que hace dicho código es decirle al sitio web: comprueba si el navegador del usuario es propio de Android, iPhone, iPad, Blackberry, Windows Phone, iPod o webOS y, en caso afirmativo, muestra por consola el texto «Estás usando un dispositivo móvil!!». En caso contrario, la consola mostrará el texto «No estás usando un móvil».
Siempre que la condición anterior sea cierta, el usuario estará usando un dispositivo móvil. Y en práctica totalidad de los casos, los usuarios que accedan a la web mediante dispositivos móviles cumplirán con dicha condición.
Sin embargo, existe una gran cantidad de sistemas operativos y navegadores para dispositivos móviles de uso muy reducido. Como consecuencia, aunque es poco probable, es posible que llegue algún usuario al sitio web mediante un dispositivo móvil y que la condición anterior no lo detecte.
Es por ello que a continuación te enseño una alternativa para detectar dispositivos móviles con JavaScript.
Detectar un dispositivo móvil en JavaScript mediante los píxeles de pantalla
También existe la posibilidad de detectar el tamaño de pantalla del dispositivo que accede al sitio web mediante JavaScript, de forma que sea posible deducir si el usuario está usando un ordenador, una tableta o un móvil.
Sin embargo, cada uno de los tres dispositivos anteriores puede tener un número de píxeles muy variable, por lo que no será posible definir un tamaño capaz de diferenciar dispositivos de forma definitiva.
En el caso de que desees identificar todo tipo de smartphones y las tabletas más pequeñas, te recomiendo tomar como referencia los 768 píxeles de ancho. Los valores que superen dicha cifra, serán tabletas grandes y ordenadores.
Si por el contrario necesitas identificar todo tipo de teléfonos inteligentes y las tabletas más grandes, te recomiendo establecer el límite en los 1200 píxeles. Sin embargo, en este caso, existen ordenadores muy pequeños que pueden tener ese ancho.
En cualquier caso, para detectar un dispositivo móvil en JavaScript empleando el ancho de la pantalla debes utilizar el objeto window junto con su propiedad innerWidth. Un ejemplo es el siguiente:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documento</title>
</head>
<body>
<script>
let navegador = navigator.userAgent;
if (window.innerWidth <= 768) {
console.log("Es un móvil");
}
</script>
</body>
</html>El código anterior muestra en consola el texto «Es un móvil» cuando la resolución de pantalla es menor a 780 píxeles.
Ejemplo de uso: ventana emergente JavaScript para dispositivos móviles
En nuestra labor diaria como desarrolladores de ecommerce y sitios web corporativos no somos grandes aliados de las ventanas emergentes, también conocidas como Pop-Up.
Sin embargo, a modo de ejemplo, te voy a enseñar cómo crear una ventana emergente únicamente para dispositivos móviles empleando JavaScript. Para ello, emplearé una función muy simple, alert().
Además, voy a combinar la detección de los navegadores de dispositivos móviles junto con el ancho de pantalla. De esta manera, en el caso extraordinario de que acceda a la web un usuario que emplea un dispositivo móvil pero no uno de los navegadores que hemos definido, el script lo detectará siempre y cuando su pantalla sea inferior a los 768 píxeles.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documento</title>
</head>
<body>
<script>
let navegador = navigator.userAgent;
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) || window.innerWidth <= 780) {
alert("Toma Pop-Up, por entrar con un dispositivo móvil");
} else {
console.log("No estás usando un móvil");
}
</script>
</body>
</html>Eres libre para usar el código anterior para detectar dispositivos móviles con JavaScript. Te invito a probarlo y modificarlo para los fines que quieras. En su interior puedes programar las acciones que quieres que haga tu sitio web cuando se detecte un dispositivo móvil.
Detectar un dispositivo móvil con JavaScript: Conclusiones
Como has podido comprobar, JavaScript permite programar diferentes condicionales para detectar si los usuarios acceden a tu sitio web a través de dispositivos móviles. Puedes identificar sus navegadores, el ancho de su pantalla o combinar ambas características.
Te invito a poner en práctica los códigos anteriores y a descubrir todos nuestros artículos sobre programación web.
¡Hasta la próxima!
Elmer dice:
Es posible detectar si es celular y extraer el numero
bancasince dice:
Con solo JavaScript no se puede se requiere librerías adicionales para esa forma
Ivan dice:
a que te refieres con «extraer el número». ¿ Cuál número ?