So erfassen Sie ein mobiles Gerät mit JavaScript

Manchmal müssen Programmierer eine Web -App für das Vorhandensein eines mobilen Gerätemodus bestimmen. Zu diesem Zweck kann die Erkennung von Agenten verwendet werden. Es wird jedoch nicht empfohlen, die Erkennung von Benutzeragenten für aktuelle Web -Apps zu verwenden. Die bessere Lösung für das diskutierte Problem besteht darin, die integrierte JavaScript-integrierte API zum Erkennen von Medien namens “zu nutzenFenster.MatchMedia ()”. Es ist eine effiziente und einfachste Möglichkeit, mobile Geräte zu erkennen.

In diesem Beitrag wird das Verfahren zum Erkennen eines mobilen Geräts mit JavaScript beschrieben.

So erfassen Sie ein mobiles Gerät mit JavaScript?

Verwendung der "Fenster.MatchMedia ()Methode mit CSS -Medienabfragen zum Erkennen mobiler Geräte in einer Web -App mit JavaScript. Die MatchMedia () -Methode bietet ein neues Mediaquery -List.

Syntax
Befolgen Sie die genannte Syntax zum Erkennen des mobilen Geräts in einer Web -App:

Fenster.MatchMedia ()

Diese Methode gibt eine neue Liste von “aus“ ausMedienqueritätObjekte, die überprüfen, ob das Dokument mit der Medienabfrage -Zeichenfolge übereinstimmt.

Beispiel
Verwenden Sie in der JavaScript -Datei eine bedingte Anweisung, in der wir die Breite des Bildschirms des Geräts überprüfen werden. Es wird als mobiles Gerät angesehen, wenn der Bildschirm 768px oder weniger als 768px beträgt. Übereinstimmung mit dieser Bildschirmgröße mit der zurückgegebenen Medienquery -Liste der MatchMedia () -Methode. Wenn es übereinstimmt, zeigen Sie eine Warnmeldung an “Mobiler Modus”; sonst ist es ein "Desktop -Modus”:

if (Fenster.MatchMedia ("(Max-Breite: 768px)")).Streichhölzer)

alert ("mobiler Modus");
dokumentieren.Schreiben ("Sie verwenden ein mobiles Gerät.");

anders

alert ("Desktop -Modus");
dokumentieren.Schreiben ("Sie verwenden den Desktop.");

Ausgang

Das obige GIF zeigt, wann wir das Dokumentfenster angepasst haben, und das Ansichtsfenster entspricht dem 768px. Infolgedessen eine Warnmeldung “Mobiler Modus”Wurde angezeigt.

Abschluss

Verwenden Sie das „Mobilgerätemodus in einer Web -App“ die “Fenster.MatchMedia ()Methode mit CSS -Medienabfragen. Es gibt ein neues MediaqueryList -Objekt zurück, mit dem festgestellt werden kann. In diesem Beitrag wurde das Verfahren zum Erkennen eines mobilen Geräts mit JavaScript beschrieben.