Unterscheidung Smartphone, Tablet und PC

Für eine Unterscheidung, ob eine Seite auf einem PC oder auf einem Smartphone/Tablet aufgerufen wird, gibt es mehrere Gründe.

Ein Grund kann sein, dass auf einem PC ein Video auf der Seite gezeigt werden soll, dass aus Resourcengründen beim Aufruf über ein Smartphone nicht angezeigt werden soll. Siehe dazu das Kapitel Unterschied in der Anzeige

Ein weiterer Grund kann sein, dass bei einem PC eine andere Seite aufgerufen werden soll, als bei einem Smartphone. Siehe dazu das Kapitel Unterschiedliche Seite aufrufen

In diesem Fall soll lediglich unterschieden werden, ob es sich um ein Smartphone/Tablet (Android, Ipad oder Windows 8??????) handelt, oder ob die Seite von keinem Smartphone aufgerufen wird. (Windows 8 konnte ich noch nicht testen)

Die Unterscheidung ist mit dem Aufruf navigator.userAgent möglich.

Im Ergebnis dieses Aufruf ist bei Smartphones android oder iphone enthalten (Windwos 8 ???=). toLowerCase() wird verwendet um Groß/Kleinschreibungsunterschiede auszuschließen.

Hier wird angezeigt, was der Aufruf aktuell liefert.

Nach dem Laden der Seite wird die Funktion checkDeviceAnzeige aufgerufen.

Die Funktion prüft, ob es sich um ein Smartphone/Tablet handelt. Ist dies der Fall wird nur das Bild angezeigt. Sonst wird das Video abgespielt.

checkDeviceAnzeige()

Mit den Buttons kann zwischen der PC-Anzeige und der Smartphone-Anzeige gewählt werden.

Bedingt durch das kleinere Display eines Smartphone kann es notwendig werden eine für Smartphones angepasste Seite aufzurufen. Da Tablets ein größeres Display haben, ist es hier nicht mit der Unterscheidung nach dem Betriebssystem getan.

Sollte das Problem nur beim Layout liegen, sollte man sich auf den Fall über Responsive Webdesign und Media Queries informieren.

Ist es unumgänglich eine unterschiedliche Seite aufzurufen, kann man über die Fenstergröße des Browser gehen.

Hier wird die Breite und Höhe des Browsers angezeigt.

Die Werte für screen ändern sich nur bei verschiedenen Geräten oder wenn z.B. beim Firefox mit "Strg +" die Größe geändert wird.

Die Größe des innerWidth bzw. innerHeight ändert sich beim Ändern der Fenstergröße für den Browser. Auf diesen Wert reagiert auch der Media Querie: @media (max-width:1280px).

Auf welchen Wert reagiert wird kann man sich aussuchen. In diesem Beispiel wird ab einer Breite (innerWidth) kleiner 1200px die Smartphoneseite aufgerufen.

Der Button Seite laden ruft eine Seite auf, die beim Laden entscheidet, ob die PC-Seite oder die Smartphoneseite angezeigt wird.

Nach dem Laden der Seite wird die Funktion checkDeviceSeite aufgerufen. Die Funktion prüft, ob es sich um ein Smartphone handelt. Ist dies der Fall wird die Seite für das Smartphone angezeigt. Sonst wird die gerade geladenen Seite angezeigt.

checkDeviceSeite()

Mit den Buttons kann zwischen der PC-Anzeige und der Smartphone-Anzeige gewählt werden.