Cómo detectar un dispositivo móvil con JavaScript

A veces, los programadores deben determinar una aplicación web para la presencia de un modo de dispositivo móvil. Para este propósito, se puede usar la detección de agentes. Sin embargo, no se recomienda utilizar la detección de agentes de usuario para las aplicaciones web actuales. La mejor solución para el tema discutido es utilizar la API incorporada de JavaScript para detectar medios llamados "ventana.MatchMedia ()". Es una forma más eficiente y simple de detectar dispositivos móviles.

Esta publicación describirá el procedimiento para detectar un dispositivo móvil usando JavaScript.

Cómo detectar un dispositivo móvil con JavaScript?

Utilizando el "ventana.MatchMedia ()Método "con consultas de medios CSS para detectar dispositivos móviles en una aplicación web con JavaScript. El método MatchMedia () proporciona un nuevo objeto MedialQueryList, que se puede utilizar para identificar si el documento coincide o no en la cadena de consulta de medios y para realizar un seguimiento de él para que pueda saber cuándo lo hace o no coincidir o no coincidir con.

Sintaxis
Siga la sintaxis mencionada para detectar el dispositivo móvil en una aplicación web:

ventana.MatchMedia ()

Este método genera una nueva lista de "Calemanería"Objetos que verifican si el documento coincide con la cadena de consulta de medios.

Ejemplo
En el archivo de JavaScript, use una declaración condicional donde verificaremos el ancho de la pantalla del dispositivo. Se considera un dispositivo móvil si la pantalla es 768px o menos de 768px. Haga coincidir este tamaño de pantalla con la lista de consultas de medios devueltas desde el método MatchMedia (). Si coincide, muestre un mensaje de alerta "Modo móvil"; de lo contrario, es un "Modo de escritorio":

if (ventana.MatchMedia ("(Max-Width: 768px)").partidos)

alerta ("modo móvil");
documento.Escribe ("Estás usando un dispositivo móvil.");

demás

alerta ("modo de escritorio");
documento.escribir ("Estás usando escritorio.");

Producción

El GIF anterior muestra cuándo hemos ajustado la ventana del documento, y la ventana gráfica es equivalente al 768px. Como resultado, un mensaje de alerta "Modo móvil"Se ha mostrado.

Conclusión

Para detectar el modo de dispositivo móvil en una aplicación web, use el "ventana.MatchMedia ()Método con consultas de medios de CSS. Devuelve un nuevo objeto MedialQueryList, que se puede usar para identificar si el documento coincide o no en la cadena de consulta de medios y para realizar un seguimiento de él para que pueda saber cuándo coincide o no coincide con. Esta publicación describió el procedimiento para detectar un dispositivo móvil con JavaScript.