<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=982826425155997&amp;ev=PageView&amp;noscript=1">

Mit JavaScript mobile Geräte erkennen

Moderne Webanwendungen unterstützen alle Geräte Klassen, vom 27 Zoll Desktop PC bishin zum iPhone. Um dem Nutzer ein optimales Anwendererlebnis bieten zu können ist es oft notwendig den Gerätetyp zu kennen. Im Folgenden zeigen ich Ihnen, wie man mobile Geräte mithilfe von JavaScript erkennen kann.

Detect_mobile_device_with_js

Warum nicht einfach die Breite des Fensters auslesen?

Eine der gängisten Methoden zur Erkennung von mobilen Geräten ist das auslesen der Fensterbreite. Leider hilft es nicht allein die Breite des Fensters auszulesen, zusätzlich muss auch die Breite der Scrollbar einberechnet werden (Zu diesem Thema wird in Zukunft ein seperater Artikel erscheinen).

Doch selbst wenn diese Erkennung einwandfrei funktioniert, hat sie eine Schwäche: Wenn ein Anwender z.B. auf seinem Desktop PC die größe des Fensters verkleinert, würde eine solche Funktion den Wert "true" zurückliefern, obwohl es sich nicht um ein mobiles Gerät handelt. Wir müssen daher einen anderen Weg finden.

 

Wie wärs mit userAgent?

Es gibt die Möglicht mittels JavaScript den aktuellen userAgent auszulesen. Dieser liefert u.a. bei einem iPad "iPad" und bei mobilen Internet Explorer "IEMobile" zurück. 

Doch wir wollen nicht wissen, ob es sich um ein iPad handelt (was in einigen Fällen durchaus sinnvoll sein kann), sondern ob es sich um ein mobiles Endgerät handelt. Hierfür kombinieren wir die verschiedenen relevanten userAgents in einem Objekt mit der Bezeichnung "isMobile".

 

 

Wir können nun einfach isMobile.any() abfragen, und bekommen "true" zurück, falls es sich um einen der definierten userAgents handelt. Zusätzlich kann man z.B. mit isMobile.iOS() abfragen, ob es sich um ein iOS Gerät handelt. Praktisch!


Hier das Beispiel in der Praxis. Mit Klick auf den Button wird überprüft, ob das aktuelle Gerät ein Mobiles ist. 

Alois Wever Veröffentlicht in JavaScript 0 Comments

Einfach organisiert mit julitec

Kostenfrei starten mit julitec Free!

Sichern Sie sich unser eBook!

Download eBook mit 5 kostenfreien Software-Tools für Newsletter, CRM und Kundenservice