Überprüfen ob ein Gerät wirklich “mobil” ist

erstellt am: 04.05.2016 | Kategorien: Webentwicklung | Schlagworte: Javascript • Jquery • mobile • Responsive

Ob ein Gerät mobil ist, kann man auf einer Webseite über mehrere Arten überprüfen.
Ob das Gerät wirklich portable bzw. mobil ist – sprich bewegt werden kann – ist aber oft noch nicht damit geklärt.
Oft werden folgende Verfahren verwendet:

• Bildschirmbreite abfragen: Eine kleine Bildschirm bedeutet noch nicht, dass das Gerät mobil ist.
• User Agent: Ziemlich aufwendiges Verfahren. Auch lässt sich der User Agent String vom Benutzer anpassen.
• Feature detection

Feature detection ist recht vielversprechend. Man kann z.B. mit JavaScript überprüfen, ob der Browser den Eventtyp devicemotion unterstützt.

if (window.DeviceMotionEvent) {
   console.log("DeviceMotion is supported");
}

Das Problem ist allerdings, dass z.B. ein Desktop-Firefox Browser diesen Event unterstützt – auch wenn das Gerät selbst nicht die Daten für diesen Event liefern kann. Die Prüfung würde positiv verlaufen, da der Browser grundsätzlich diesen Eventtyp unterstützt.
Wie kann man also über devicemotion herausfinden ob es sich um ein portables Gerät handelt? Statt auf Unterstützung des Eventtyps zu setzten kann man den Event selbst einmal abfangen. Da ein portables Gerät höchstwahrscheinlich kurz bewegt wird, kann man folgendermaßen vorgehen. Jquery macht das einmalige Eventabfangen einfach:

See the Pen Test if mobile by uli schaeffler (@ulrischa) on CodePen.

Als erster einen Kommentar schreiben.