In der Welt der modernen Technologie ist es wichtig, dass Sie Ihre Webinhalte an verschiedene Geräte wie Computer, Tablets, Smartphones und Fernseher anpassen können. Internetseiten und Anwendungen müssen für den jeweiligen Gerätetyp benutzerfreundlich und für den jeweiligen Gerätetyp optimiert sein. Deshalb wird die Bestimmung des Gerätetyps zu einem wichtigen Aspekt der Entwicklung.
Mit der Programmiersprache JavaScript können Sie ganz einfach den Gerätetyp ermitteln, auf dem Ihre Anwendung ausgeführt wird oder Ihre Website geladen wird. In diesem Artikel werden wir uns einige einfache Möglichkeiten ansehen, wie Sie den Gerätetyp mithilfe von JavaScript ermitteln können.
Eine der einfachsten Möglichkeiten, den Gerätetyp in JavaScript zu bestimmen, besteht darin, die Bildschirmbreite zu überprüfen. Die Bildschirmbreite kann ein nützlicher Indikator für den Gerätetyp sein, da Computer und Tablets normalerweise eine größere Bildschirmgröße haben als Smartphones und mobile Geräte. Sie können die window-Eigenschaft verwenden.innerWidth, um die Breite des Bildschirms zu erhalten.
Außerdem können Sie nach bestimmten Funktionen oder Eigenschaften suchen, die nur auf bestimmten Gerätetypen vorhanden sind. Smartphones und Tablets verfügen beispielsweise über eine integrierte Standortbestimmungsfunktion, mit der Sie den Gerätetyp ermitteln können. Sie können das Vorhandensein dieser Funktion mit einer bedingten if-Anweisung überprüfen.
Methode über window.navigator.userAgent
Bevor Sie diese Methode verwenden, sollten Sie sich mit den verschiedenen Werten vertraut machen, die die UserAgent-Eigenschaft in verschiedenen Browsern und Betriebssystemen annehmen kann. In verschiedenen Versionen von Chrome kann beispielsweise die UserAgent-Eigenschaft die folgenden Werte zurückgeben:
| Betriebssystem | Wert der UserAgent-Eigenschaft |
|---|---|
| Windows | Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 |
| MacOS | Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.97 Safari/537.36 |
| Linux | Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.82 Safari/537.36 |
Mithilfe der indexOf-Methode für die UserAgent-Zeichenfolge können Sie überprüfen, ob sie bestimmte Schlüsselwörter enthält, die auf den Gerätetyp verweisen. Wenn Sie beispielsweise feststellen möchten, dass ein Benutzer ein Windows-Gerät verwendet, können Sie den folgenden Code verwenden:
if (window.navigator.userAgent.indexOf("Windows") != -1)
Auf ähnliche Weise können Sie den Gerätetyp anhand von Schlüsselwörtern im Wert der UserAgent-Eigenschaft für andere Betriebssysteme und Browser definieren.
Methode mit window.innerWidth
Die folgende Tabelle enthält die geschätzten Werte für die Breite der innerWidth und den entsprechenden Gerätetyp:
| innerWidth | Gerätetyp |
|---|---|
| 1024 oder mehr | Desktop |
| 768-1023 | Tablett |
| weniger als 768 | Mobiles Gerät |
Um den Gerätetyp basierend auf dem window zu bestimmen.innerWidth kann den folgenden Code verwenden:
if (window.innerWidth >= 1024) else if (window.innerWidth >= 768) elseBeachten Sie, dass diese Werte angenommen werden und sich je nach Gerät und Browser des Benutzers unterscheiden können.
Verwenden von window.innerWidth ist eine einfache und bequeme Möglichkeit, den Gerätetyp in JavaScript zu bestimmen, was bei der Entwicklung adaptiver Websites oder beim Schreiben von Code nützlich sein kann, der auf verschiedene Plattformen zugeschnitten ist.
Methode mit Viewport-Validierung
Sie können den folgenden Code verwenden, um den Gerätetyp mithilfe der Viewport-Überprüfung zu bestimmen:
if (window.innerWidth < 768)
//code für mobile Geräte
//code für Desktop-Geräte
In diesem Beispiel ist der Wert 768 die Schwellenwertbreite des Viewports, unterhalb der angenommen wird, dass das Gerät mobil ist. Sie können diesen Wert nach Ihren Bedürfnissen ändern.
Die Methode mit der Viewport-Validierung ist eine einfache und bequeme Möglichkeit, den Gerätetyp ohne Verwendung komplexer Algorithmen und Bibliotheken zu bestimmen.
