Cómo detectar un dispositivo móvil con JavaScript: métodos actuales
Durante años fue habitual detectar si un usuario navegaba desde un móvil analizando el userAgent y buscando términos como Android, iPhone, BlackBerry u Opera Mini.
Hoy ese enfoque no debería ser nuestra primera opción.
Los dispositivos actuales pueden combinar pantalla táctil, teclado, ratón, diferentes tamaños de pantalla e incluso cambiar de configuración mientras se utilizan. Por eso, normalmente es más fiable detectar la característica que necesitamos adaptar que intentar identificar el dispositivo.
Veamos las alternativas actuales.
¿Necesitas realmente saber si es un móvil?
Antes de escribir código, conviene definir qué queremos conseguir.
Por ejemplo:
- adaptar la interfaz a una pantalla pequeña;
- aumentar el tamaño de botones para interacción táctil;
- saber si podemos utilizar efectos
hover; - comprobar si el navegador soporta una API determinada.
En todos estos casos podemos detectar directamente esa característica sin identificar Android, iOS o un modelo concreto de dispositivo.
Detectar el tamaño de pantalla con matchMedia()
Si queremos modificar una funcionalidad según el espacio disponible, podemos utilizar window.matchMedia().
const pantallaPequena = window.matchMedia("(max-width: 768px)").matches;
if (pantallaPequena) {
console.log("Usamos una interfaz compacta");
}
El funcionamiento es equivalente al de una media query de CSS.
Esto resulta adecuado para situaciones como cambiar un menú, modificar determinados componentes o adaptar la navegación cuando el viewport es reducido.
También podemos reaccionar cuando cambia el tamaño:
const mediaQuery = window.matchMedia("(max-width: 768px)");
mediaQuery.addEventListener("change", (evento) => {
document.body.classList.toggle("vista-compacta", evento.matches);
});
Así la interfaz puede responder, por ejemplo, al redimensionar una ventana o cambiar la orientación del dispositivo.
Siempre que el cambio sea exclusivamente visual, es preferible resolverlo directamente mediante CSS responsive y utilizar JavaScript solo cuando necesitemos modificar también el comportamiento.
Detectar el tipo de interacción: pointer y hover
Otra necesidad habitual es adaptar una interfaz según la forma en la que el usuario interactúa con ella.
Podemos detectar si el dispositivo apuntador principal tiene poca precisión:
const punteroTactil = window.matchMedia("(pointer: coarse)").matches;
pointer: coarse suele estar asociado a la interacción con el dedo, mientras que pointer: fine corresponde normalmente a dispositivos más precisos como un ratón o trackpad.
Esto puede ser útil para aumentar zonas clicables o evitar controles demasiado pequeños.
También podemos comprobar si el dispositivo principal permite mantener el puntero sobre un elemento:
const permiteHover = window.matchMedia("(hover: hover)").matches;
Si una funcionalidad depende de mostrar información mediante hover, esta comprobación es más útil que intentar averiguar si el visitante utiliza un móvil.
Utilizar feature detection
Cuando necesitamos una funcionalidad concreta, la opción más fiable suele ser comprobar directamente si el navegador la soporta.
Por ejemplo:
if ("geolocation" in navigator) {
console.log("La geolocalización está disponible");
}
O:
if ("IntersectionObserver" in window) {
console.log("Podemos utilizar IntersectionObserver");
}
Este enfoque se conoce como feature detection.
En lugar de asumir las capacidades de un navegador según el dispositivo o sistema operativo, comprobamos directamente si dispone de la característica que necesitamos.
Es una estrategia más resistente a cambios de navegadores y a la aparición de nuevos dispositivos.
¿Debemos seguir utilizando navigator.userAgent?
Todavía encontramos código como este en muchos proyectos:
const esMovil = /Android|iPhone|iPad|iPod|IEMobile|Opera Mini/i
.test(navigator.userAgent);
Puede funcionar en determinados casos, pero presenta varios problemas.
El userAgent no fue diseñado como un sistema fiable para detectar capacidades. Su contenido puede variar entre navegadores y plataformas y obliga a mantener listas de dispositivos y sistemas operativos.
Además, los navegadores han ido reduciendo parte de la información disponible mediante User-Agent para limitar técnicas de identificación y fingerprinting.
Por eso, antes de utilizarlo debemos comprobar si podemos resolver nuestra necesidad mediante:
- media queries;
matchMedia();pointerohover;- detección directa de funcionalidades.
Si alguna de estas alternativas responde al problema, será normalmente preferible a analizar el User-Agent.
¿Qué ocurre con navigator.userAgentData.mobile?
Algunos navegadores implementan User-Agent Client Hints y permiten consultar:
if (navigator.userAgentData) {
console.log(navigator.userAgentData.mobile);
}
La propiedad puede aportar información sobre si el navegador considera que se ejecuta en un dispositivo móvil, pero no tiene soporte uniforme en todos los navegadores.
Por tanto, no conviene utilizarla como única condición para una funcionalidad importante.
¿Y si nuestra web todavía utiliza jQuery?
No es necesario eliminar jQuery de todo un proyecto para modernizar la detección de dispositivos.
Podemos utilizar APIs nativas como matchMedia() y continuar usando jQuery para manipular el DOM:
$(function () {
const pantallaPequena = window.matchMedia("(max-width: 768px)").matches;
if (pantallaPequena) {
$("body").addClass("vista-compacta");
}
});
jQuery no aporta un mecanismo más fiable para saber si un dispositivo es móvil. En este ejemplo simplemente se utiliza para añadir una clase al documento.
Esto permite modernizar proyectos antiguos progresivamente sin mantener métodos basados en listas de Android, iPhone, BlackBerry, Opera Mini o Windows Mobile.
Qué método utilizar en cada caso
La elección depende de lo que queramos detectar:
Adaptar la interfaz al tamaño disponible: CSS responsive o matchMedia().
Adaptar controles a una interacción táctil: pointer.
Comprobar si podemos utilizar hover: media query hover.
Saber si existe una funcionalidad determinada: feature detection.
Identificar específicamente navegador o plataforma: valorar User-Agent o Client Hints únicamente cuando exista una necesidad real y teniendo presentes sus limitaciones.
Detectar capacidades en lugar de dispositivos
Dividir la web entre “móvil” y “escritorio” resulta cada vez menos preciso. Tablets con teclado, portátiles táctiles, dispositivos plegables y diferentes métodos de entrada hacen que esas categorías sean insuficientes para muchos desarrollos.
Siempre que sea posible, es mejor detectar el espacio disponible, el tipo de interacción o la funcionalidad que necesitamos.
Así obtenemos código más mantenible y una interfaz capaz de adaptarse mejor a dispositivos actuales y futuros.
En ENDEOS desarrollamos y mantenemos soluciones web teniendo en cuenta compatibilidad, rendimiento y experiencia de usuario. Un diseño responsive no consiste únicamente en detectar móviles, sino en conseguir que una web funcione correctamente independientemente del dispositivo utilizado.
Artículos relacionados:
- factory_shortcodes_assets:
- a:0:{}
- classic-editor-remember:
- block-editor