Come rilevare un dispositivo mobile con JavaScript

A volte, i programmatori devono determinare un'app Web per la presenza di una modalità dispositivo mobile. A tale scopo, è possibile utilizzare il rilevamento degli agenti. Tuttavia, non si consiglia di utilizzare il rilevamento degli agenti utente per le app Web correnti. La soluzione migliore per il problema discusso è utilizzare l'API integrata JavaScript per rilevare i media chiamati "finestra.MatchMedia ()". È un modo più efficiente e semplice per rilevare i dispositivi mobili.

Questo post descriverà la procedura per rilevare un dispositivo mobile utilizzando JavaScript.

Come rilevare un dispositivo mobile con JavaScript?

Usando il "finestra.MatchMedia ()"Metodo con le query multimediali CSS per rilevare i dispositivi mobili in un'app Web con JavaScript. Il metodo MatchMedia () fornisce un nuovo oggetto MediaQueryList, che può essere utilizzato per identificare se il documento corrisponde o meno alla stringa di query multimediale e per tenerne traccia in modo da poter dire quando lo fa o non corrisponde.

Sintassi
Seguire la sintassi menzionata per rilevare il dispositivo mobile in un'app Web:

finestra.MatchMedia ()

Questo metodo emette un nuovo elenco di "MediaQuery"Oggetti che verificano se il documento corrisponde alla stringa di query multimediale.

Esempio
Nel file JavaScript, utilizzare un'istruzione condizionale in cui controlleremo la larghezza dello schermo del dispositivo. È considerato un dispositivo mobile se lo schermo è 768px o meno di 768px. Abbina questa dimensione dello schermo con l'elenco delle query multimediali restituite dal metodo MatchMedia (). Se corrisponde, mostra un messaggio di avviso "Modalità mobile"; altro, è un "Modalità desktop":

Se (finestra.MatchMedia ("(larghezza massima: 768px)").corrispondenze)

Avviso ("Modalità mobile");
documento.Scrivi ("stai usando un dispositivo mobile.");

altro

avviso ("modalità desktop");
documento.Scrivi ("Stai usando il desktop.");

Produzione

La GIF sopra mostra quando abbiamo regolato la finestra del documento e il Viewport è equivalente al 768px. Di conseguenza, un messaggio di allerta "Modalità mobile"È stato visualizzato.

Conclusione

Per rilevare la modalità dispositivo mobile su un'app Web, utilizzare "finestra.MatchMedia ()"Metodo con le query multimediali CSS. Restituisce un nuovo oggetto MediaQueryList, che può essere utilizzato per identificare se il documento corrisponde o meno alla stringa di query multimediale e per tenerne traccia in modo da poter dire quando non corrisponde o non corrisponde. Questo post ha descritto la procedura per rilevare un dispositivo mobile con JavaScript.