Jak wykryć urządzenie mobilne z JavaScript

Czasami programiści muszą określić aplikację internetową w celu obecności trybu urządzenia mobilnego. W tym celu można użyć wykrywania agentów. Nie zaleca się jednak korzystania z wykrywania agentów użytkownika do bieżących aplikacji internetowych. Lepszym rozwiązaniem do omawianego problemu jest wykorzystanie wbudowanego interfejsu API JavaScript do wykrywania mediów o nazwie „okno.MatchMedia ()". Jest to wydajny i najprostszy sposób wykrywania urządzeń mobilnych.

Ten post opisuje procedurę wykrywania urządzenia mobilnego za pomocą JavaScript.

Jak wykryć urządzenie mobilne z JavaScript?

Używając "okno.MatchMedia ()”Metoda z zapytaniami CSS Media w celu wykrywania urządzeń mobilnych w aplikacji internetowej z JavaScript. Metoda MatchMedia () zapewnia nowy obiekt MediaQueryList, którego można użyć do określenia, czy dokument pasuje do ciągu zapytań multimedialnych i śledzenia go, abyś mógł stwierdzić, kiedy to robi lub nie pasuje.

Składnia
Postępuj zgodnie z wymienioną składnią do wykrywania urządzenia mobilnego w aplikacji internetowej:

okno.MatchMedia ()

Ta metoda przedstawia nową listę „Mediaquery”Obiekty, które weryfikują, czy dokument pasuje do ciągu zapytania multimedialnego.

Przykład
W pliku JavaScript użyj instrukcji warunkowej, w której sprawdzimy szerokość ekranu urządzenia. Jest uważane za urządzenie mobilne, jeśli ekran ma 768px lub mniej niż 768px. Dopasuj ten rozmiar ekranu do zwróconej listy zapytania multimediów z metody MatchMedia (). Jeśli pasuje, pokaż wiadomość o alercie „Tryb mobilny”; W przeciwnym razie jest to „Tryb stacjonarny”:

if (okno.MatchMedia („(maksymalna szerokość: 768px)”).mecze)

alert („tryb mobilny”);
dokument.Napisz („Używasz urządzenia mobilnego.");

w przeciwnym razie

alert („tryb stacjonarny”);
dokument.Napisz („Używasz komputerów stacjonarnych.");

Wyjście

Powyższy GIF pokazuje, kiedy dostosowaliśmy okno dokumentu, a rzutek jest równoważny 768px. W rezultacie komunikat o alercie „Tryb mobilny”Został wyświetlony.

Wniosek

Do wykrywania trybu urządzenia mobilnego w aplikacji internetowej użyj „okno.MatchMedia ()”Metoda z zapytaniami CSS Media. Zwraca nowy obiekt MediaQueryList, którego można użyć do określenia, czy dokument pasuje do ciągu zapytania multimedialnego i do śledzenia go, abyś mógł powiedzieć, kiedy to się stanie lub nie pasuje. W tym poście opisano procedurę wykrywania urządzenia mobilnego za pomocą JavaScript.