Hvordan oppdage en mobil enhet med JavaScript

Noen ganger må programmerere bestemme en webapp for tilstedeværelse av en mobil enhetsmodus. For dette formålet kan agentdeteksjon brukes. Det anbefales imidlertid ikke å bruke brukeragentdeteksjon for nåværende webapper. Den bedre løsningen for det diskuterte problemet er å bruke JavaScript innebygd API for å oppdage medier kalt “vindu.MatchMedia ()”. Det er en effektiv og enkleste måte å oppdage mobile enheter.

Dette innlegget vil beskrive prosedyren for å oppdage en mobil enhet ved hjelp av JavaScript.

Hvordan oppdage en mobil enhet med JavaScript?

Bruker "vindu.MatchMedia ()”Metode med CSS Media -spørsmål for å oppdage mobile enheter i en webapp med JavaScript. MatchMedia () -metoden gir et nytt MediaQuerylist -objekt, som kan brukes til å identifisere om dokumentet samsvarer.

Syntaks
Følg den nevnte syntaks for å oppdage den mobile enheten i en webapp:

vindu.MatchMedia ()

Denne metoden sender ut en ny liste over "MediaQuery”Objekter som verifiserer om dokumentet samsvarer med media -spørringsstrengen.

Eksempel
I JavaScript -filen bruker du en betinget uttalelse der vi vil sjekke bredden på enhetens skjerm. Det regnes som en mobil enhet hvis skjermen er 768px eller mindre enn 768px. Match denne skjermstørrelsen med den returnerte medie -spørringslisten fra MatchMedia () -metoden. Hvis det samsvarer med, vis en varslingsmelding “Mobilmodus”; ellers er det en "Desktop -modus”:

hvis (vindu.MatchMedia ("(maks bredde: 768px)").fyrstikker)

Varsel ("Mobilmodus");
dokument.Skriv ("Du bruker en mobil enhet.");

ellers

Varsel ("Desktop Mode");
dokument.Skriv ("Du bruker Desktop.");

Produksjon

Ovennevnte GIF viser når vi har justert dokumentvinduet, og Viewport tilsvarer 768px. Som et resultat, en varslingsmelding “Mobilmodus”Har blitt vist.

Konklusjon

For å oppdage mobilenhetsmodus på en webapp, bruk "vindu.MatchMedia ()”Metode med CSS Media -spørsmål. Den returnerer et nytt mediaserylistobjekt, som kan brukes til å identifisere om dokumentet samsvarer med media -spørringsstrengen eller for å holde rede på det slik at du kan fortelle når det ikke stemmer. Dette innlegget beskrev prosedyren for å oppdage en mobil enhet med JavaScript.