Cómo detectar navegadores móviles con JavaScript

La detección móvil siempre ha sido un aspecto crucial del desarrollo de aplicaciones. Es relevante tanto para las aplicaciones como para el software y los sitios web. Existen innumerables razones para buscar agentes de navegador móvil. Lo más importante, la capacidad de brindar una experiencia de usuario única.

Solo la biblioteca UAParser.js obtiene millones de descargas de paquetes semanales. Y, en la mayoría de los casos, es suficiente si está construyendo algo desde cero. Pero, ¿qué pasa con las formas alternativas de detectar navegadores móviles con JavaScript?

A veces, es posible que solo desee una solución simple que haga el trabajo sin bibliotecas. Y en este artículo, les presentaré algunas técnicas de JavaScript para detectar usuarios móviles. ¡Avísame si me perdí alguno!

navigator.userAgent

El santo grial de la detección del navegador es la propiedad navigator.UserAgent.

 if (https://c6c8j7x5.rocketcdn.me/Android|iPhone/i.test(navigator.userAgent)) { // This checks if the current device is in fact mobile } // an alternative structure to check individual matches if ( navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/iPhone/i) ) { // making individual checks }

Esta es, por supuesto, una forma muy primitiva de hacerlo. Se puede manipular fácilmente ya que la propiedad User-Agent se puede falsificar. Pero, debido a que hace el trabajo, aún puede usarlo en una variedad de proyectos. Por ejemplo, páginas de destino o hacer una redirección personalizada a una versión móvil.

¿Cómo usar navigator.userAgent para detectar el tipo de navegador y mostrar contenido según el navegador específico?

Muy bien, puede haber un caso de uso único en el que desee detectar un navegador específico, como Chrome y Firefox (o en este caso, Android y iPhone), y luego usar esos datos para mostrar contenido específico. Este enfoque se usa a menudo para proporcionar/cambiar enlaces de descarga para navegadores específicos.

En tal caso, puede utilizar la siguiente función.

 function detectBrowser() { let userAgent = navigator.userAgent; let browserName; if (userAgent.match(/chrome|chromium|crios/i)) { browserName = "Chrome"; } else if (userAgent.match(/firefox|fxios/i)) { browserName = "Firefox"; } else if (userAgent.match(/safari/i)) { browserName = "Safari"; } else if (userAgent.match(/opr\//i)) { browserName = "Opera"; } else if (userAgent.match(/edg/i)) { browserName = "Edge"; } else if (userAgent.match(/android/i)) { browserName = "Android"; } else if (userAgent.match(/iphone/i)) { browserName = "iPhone"; } else { browserName = "Unknown"; } document.querySelector("div.form-style h3").innerText = "You are browsing with: " + browserName + ""; }

Puede comentar las diversas declaraciones else if para los navegadores que no desea verificar y, de la misma manera, puede agregar navegadores adicionales que sí desea verificar.

Evento táctil

Un método para detectar usuarios móviles es verificar si el dispositivo tiene una pantalla táctil.

Usando la propiedad GlobalEventHandlers.ontouchstart, puede hacer una verificación simple para ver cómo interactuó el usuario con su aplicación. Si la interacción provino de una pantalla táctil, puede devolver una versión móvil de la aplicación o página.

 if ("ontouchstart" in document.documentElement) { // content for touch-screen (mobile) devices } else { // everything else (desktop) }

Los dispositivos de pantalla táctil como Surface no tienen esta propiedad. Por lo tanto, los usuarios que provengan de dispositivos táctiles de escritorio seguirán viendo la versión de escritorio de sus páginas.

Ventana.matchMedia()

Window.matchMedia() es una de las mejores propiedades para detectar usuarios móviles con JavaScript. Y es así porque te permite interactuar con CSS directamente.

En muchos casos, las consultas de medios son superiores porque tienen herramientas integradas de detección móvil. Por ejemplo, puede hacer una llamada para verificar si "puntero: grueso" es verdadero.

Esta declaración específica valida si el puntero del dispositivo es fino o grueso .

 let isMobile = window.matchMedia("(pointer:coarse)").matches;

Alternativamente, el dispositivo puede tener un puntero tanto fino como grueso. Para este caso de uso, podemos verificar si algún puntero es grueso.

 let isMobile = window.matchMedia("(any-pointer:coarse)").matches;

Tenga en cuenta que esto solo valida la consulta como verdadera o falsa. Una forma más refinada de buscar dispositivos móviles es usar consultas de medios directamente.

 let isMobile = window.matchMedia("only screen and (max-width: 480px)").matches;

Esta consulta verificará directamente el ancho máximo del dispositivo y afirmará si coincide con los criterios. Nuevamente, esto es bastante trabajo para obtener todos los dispositivos correctamente. Como tal, es más fácil usar una biblioteca preconstruida con todos los tipos de dispositivos ya definidos.

Útil en ciertos contextos

A lo largo de los años, ha habido muchas propiedades de JavaScript para detectar tipos de dispositivos. Un gran número de ellos quedó en desuso, pero la mayoría de los demás se integraron en las bibliotecas. Lo que también resulta ser la mejor manera de realizar una detección móvil adecuada.

Por último, pero no menos importante, la mayoría de los marcos modernos ya incluyen la detección móvil como parte del propio marco. Vale la pena investigar si no quieres hacer todo el trabajo preliminar.

Bibliotecas para la detección de dispositivos móviles

Para esta sección, voy a enumerar las bibliotecas de JavaScript más populares para detectar dispositivos móviles. Nuevamente, enfatizo que estos son específicos de JavaScript. Consulte los documentos para una implementación adecuada en su aplicación.

UAParser.js

En lo que respecta a las bibliotecas completas, UAParser es la mejor que existe. Con más de 10 millones de descargas semanales solo en npm, UAParser es la solución de facto para detectar dispositivos móviles. Como su nombre lo delata, la biblioteca funciona analizando cadenas de User-Agent.

Sin embargo, lo que lo hace tan popular es el hecho de que puede analizar cientos de variaciones de dispositivos. Y todo ello muy bien documentado. Puede pasar de proveedores de dispositivos prácticos a patrones de detección más complejos, como la arquitectura de la CPU.

mobile-detect.js

Este es un puerto bastante sencillo de la biblioteca Mobile Detect para PHP, proporcionado a la comunidad por Heinrich Goebl. La biblioteca en sí usa User-Agent para la detección, por lo que, como discutimos anteriormente, no es la mejor opción.

Aún así, debería hacer el trabajo cuando se trata de plantillas HTML prácticas o proyectos de cartera.

esmóvil

Aquí tenemos otra versión de la propiedad User-Agent Navigator de Kai Mallea. Si bien sigue siendo una solución simple, me gusta que isMobile proporcione una variedad de especificaciones. Por ejemplo, puede probar cualquier dispositivo móvil o dispositivos específicos como teléfonos o tabletas .

reaccionar-dispositivo-detectar

¿Eres un desarrollador de React.js?

Entonces esta biblioteca de Michael Laktionov es para ti. Funciona como cabría esperar: primero, la biblioteca detecta el tipo de dispositivo y, a continuación, representa la vista en función de ese tipo. Funciona a la perfección con la integración de componentes y se puede personalizar aún más a través de llamadas API.

Un dato interesante es la cantidad de selectores que incluye esta biblioteca. Cubre dispositivos como televisores inteligentes, dispositivos portátiles, una variedad de dispositivos iPhone y mucho más. Esto le brinda una amplia selección de opciones de diseño al crear una aplicación para un dispositivo específico.