So erkennen Sie mobile Browser mit JavaScript

Die mobile Erkennung war schon immer ein entscheidender Aspekt der App-Entwicklung. Es ist sowohl für Apps als auch für Software und Websites relevant. Es gibt unzählige Gründe, nach Agenten für mobile Browser zu suchen. Am wichtigsten ist die Fähigkeit, ein einzigartiges Benutzererlebnis zu bieten.

Allein die UAParser.js-Bibliothek wird wöchentlich millionenfach heruntergeladen. Und in den meisten Fällen reicht es aus, wenn Sie etwas von Grund auf neu aufbauen. Aber was ist mit alternativen Möglichkeiten, mobile Browser mit JavaScript zu erkennen?

Manchmal möchten Sie vielleicht nur eine einfache Lösung, die ohne Bibliotheken auskommt. Und in diesem Artikel werde ich Ihnen eine Handvoll JavaScript-Techniken zur Erkennung mobiler Benutzer vorstellen. Lassen Sie mich wissen, wenn ich etwas verpasst habe!

navigator.userAgent

Der heilige Gral der Browsererkennung ist die Eigenschaft navigator.UserAgent.

 if (https://c6c8j7x5.rocketcdn.me/Android|iPhone/i.test(navigator.userAgent)) { // This checks if the current device is in fact mobile } // an alternative structure to check individual matches if ( navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/iPhone/i) ) { // making individual checks }

Das ist natürlich eine sehr primitive Methode. Es kann leicht manipuliert werden, da die User-Agent-Eigenschaft gespooft werden kann. Aber weil es die Arbeit erledigt, können Sie es trotzdem in einer Vielzahl von Projekten verwenden. ZB Landing Pages oder Erstellen einer benutzerdefinierten Weiterleitung zu einer mobilen Version.

Wie verwendet man navigator.userAgent , um den Browsertyp zu erkennen und Inhalte basierend auf dem spezifischen Browser anzuzeigen?

In Ordnung, es könnte also einen einzigartigen Anwendungsfall geben, bei dem Sie einen bestimmten Browser wie Chrome und Firefox (oder in diesem Fall Android und iPhone) erkennen und diese Daten dann verwenden möchten, um bestimmte Inhalte anzuzeigen. Dieser Ansatz wird häufig verwendet, um Download-Links für bestimmte Browser bereitzustellen/zu ändern.

In einem solchen Fall können Sie die folgende Funktion verwenden.

 function detectBrowser() { let userAgent = navigator.userAgent; let browserName; if (userAgent.match(/chrome|chromium|crios/i)) { browserName = "Chrome"; } else if (userAgent.match(/firefox|fxios/i)) { browserName = "Firefox"; } else if (userAgent.match(/safari/i)) { browserName = "Safari"; } else if (userAgent.match(/opr\//i)) { browserName = "Opera"; } else if (userAgent.match(/edg/i)) { browserName = "Edge"; } else if (userAgent.match(/android/i)) { browserName = "Android"; } else if (userAgent.match(/iphone/i)) { browserName = "iPhone"; } else { browserName = "Unknown"; } document.querySelector("div.form-style h3").innerText = "You are browsing with: " + browserName + ""; }

Sie können die verschiedenen else if Anweisungen für die Browser auskommentieren, die Sie nicht überprüfen möchten, und ebenso können Sie zusätzliche Browser hinzufügen, die Sie überprüfen möchten.

TouchEvent

Eine Methode zur Erkennung mobiler Benutzer besteht darin, zu prüfen, ob das Gerät über einen Touchscreen verfügt.

Mit der Eigenschaft GlobalEventHandlers.ontouchstart können Sie ganz einfach überprüfen, wie der Benutzer mit Ihrer App interagiert hat. Wenn die Interaktion von einem Touchscreen kam, können Sie eine mobile Version der App oder Seite zurückgeben.

 if ("ontouchstart" in document.documentElement) { // content for touch-screen (mobile) devices } else { // everything else (desktop) }

Touchscreen-Geräte wie Surface haben diese Eigenschaft nicht. Benutzer, die von Desktop-basierten Touch-Geräten kommen, sehen also weiterhin die Desktop-Version Ihrer Seiten.

Fenster.matchMedia()

Window.matchMedia() ist eine der besten Eigenschaften, um mobile Benutzer mit JavaScript zu erkennen. Und das liegt daran, dass Sie damit direkt mit CSS interagieren können.

In vielen Fällen sind Medienabfragen überlegen, weil sie über integrierte mobile Erkennungstools verfügen. Beispielsweise können Sie einen Anruf tätigen, um zu überprüfen, ob „pointer:coarse“ wahr ist.

Diese spezifische Anweisung validiert, ob der Zeiger des Geräts fein oder grob ist.

 let isMobile = window.matchMedia("(pointer:coarse)").matches;

Alternativ könnte das Gerät sowohl einen feinen als auch einen groben Zeiger haben. Für diesen Anwendungsfall können wir prüfen, ob irgendwelche Zeiger grob sind.

 let isMobile = window.matchMedia("(any-pointer:coarse)").matches;

Beachten Sie, dass dies die Abfrage nur als wahr oder falsch validiert. Eine raffiniertere Möglichkeit, nach Mobilgeräten zu suchen, ist die direkte Verwendung von Medienabfragen.

 let isMobile = window.matchMedia("only screen and (max-width: 480px)").matches;

Diese Abfrage überprüft direkt die maximale Breite des Geräts und bestätigt, ob sie den Kriterien entspricht. Auch dies ist eine ziemliche Menge Arbeit, um alle Geräte richtig hinzubekommen. Daher ist es einfacher, eine vorgefertigte Bibliothek mit allen bereits definierten Gerätetypen zu verwenden.

Nützlich in bestimmten Zusammenhängen

Im Laufe der Jahre gab es viele JavaScript-Eigenschaften zum Erkennen von Gerätetypen. Eine große Anzahl von ihnen wurde veraltet, aber die meisten anderen wurden in Bibliotheken integriert. Dies ist auch der beste Weg, um eine ordnungsgemäße mobile Erkennung durchzuführen.

Zu guter Letzt enthalten die meisten modernen Frameworks die mobile Erkennung bereits als Teil des Frameworks selbst. Es lohnt sich, darüber nachzudenken, wenn Sie nicht die ganze Beinarbeit machen möchten.

Bibliotheken zur Erkennung mobiler Geräte

In diesem Abschnitt werde ich die beliebtesten JavaScript-Bibliotheken zur Erkennung mobiler Geräte auflisten. Ich betone noch einmal, dass diese spezifisch für JavaScript sind. Informationen zur ordnungsgemäßen Implementierung in Ihrer App finden Sie in der Dokumentation.

UAParser.js

Was vollständige Bibliotheken angeht, ist UAParser das Beste, was es gibt. Mit mehr als 10 Millionen wöchentlichen Downloads allein auf npm ist UAParser die De-facto-Lösung zur Erkennung mobiler Geräte. Wie der Name schon sagt – die Bibliothek funktioniert durch das Analysieren von User-Agent-Strings.

Was es jedoch so beliebt macht, ist die Tatsache, dass Sie Hunderte von Gerätevarianten analysieren können. Und das alles ist sehr gut dokumentiert. Sie können von praktischen Geräteanbietern zu komplexeren Erkennungsmustern wie der CPU-Architektur wechseln.

mobile-detect.js

Dies ist eine ziemlich unkomplizierte Portierung der Mobile Detect-Bibliothek für PHP, die der Community von Heinrich Goebl zur Verfügung gestellt wird. Die Bibliothek selbst verwendet User-Agent zur Erkennung, also wie wir bereits besprochen haben – nicht die beste Option.

Dennoch sollte es die Aufgabe erfüllen, wenn es um praktische HTML-Vorlagen oder Portfolio-Projekte geht.

istMobil

Hier haben wir eine weitere Version der User-Agent Navigator-Eigenschaft von Kai Mallea. Obwohl es immer noch eine einfache Lösung ist, gefällt mir, dass isMobile eine Vielzahl von Spezifikationen bietet. Sie können beispielsweise für beliebige Mobilgeräte oder bestimmte Geräte wie Telefone oder Tablets testen.

reagieren-Gerät-erkennen

Sind Sie ein React.js-Entwickler?

Dann ist diese Bibliothek von Michael Laktionov genau das Richtige für Sie. Es funktioniert wie erwartet – zuerst erkennt die Bibliothek den Gerätetyp und rendert dann die Ansicht basierend auf diesem Typ. Funktioniert einwandfrei mit Komponentenintegration und kann durch API-Aufrufe weiter angepasst werden.

Eine interessante Tatsache ist die Anzahl der Selektoren, die diese Bibliothek enthält. Es umfasst Geräte wie Smart-TVs, Wearables, eine Vielzahl von iPhone-Geräten und vieles mehr. Dies gibt Ihnen eine breite Auswahl an Designoptionen, wenn Sie eine App für ein bestimmtes Gerät erstellen.