Artikel-Hilfsmenü
Mittwoch, 17. August 2022 – aktualisiert am Sonntag, 19. März 2023
Besucher mit Smartphones und anderen mobilen Geräten erkennen
Hinweis:
Dieser Artikel ist älter als 18 Monate / wurde seit 18 Monaten nicht aktualisiert. Dies kann (muss aber nicht) dazu führen, dass der Artikel, und / oder darin beschriebene Techniken, nicht mehr aktuell sind. Bitte berücksichtigen Sie diesen Hinweis bei der Lektüre.
- Foto: Daniel Korpai on Unsplash
Responsive Web Design (RWD) ist heute unverzichtbar, nachdem mehr als 50 % aller Webseitenbesuche mit dem Smartphone erfolgen. Aber es ist nicht damit getan, das Design an den kleinen Monitor anzupassen. Wichtiger ist es, die zu übertragende Datenmenge zu optimieren, um akzeptable Ladezeiten im Mobilfunknetz zu gewährleisten, und das möglicherweise begrenzte Datenvolumen der Besucher zu schonen.
Media Queries sind das Standard-Werkzeug im Rahmen von RWD. Media Queries sind spezielle CSS-Anweisungen, die bewirken, dass abhängig von der Monitorgröße "passende" Inhalte gezeigt werden. Das Problem dabei: Mit CSS können nur Inhalte beeinflusst werden, die bereit von Server heruntergeladen wurden. Weil CSS auf dem Client (Browser) greift.
Um aber den Server anzuweisen, je nach Gerät (PC, Smartphone, Tablet) unterschiedliche Inhalte auszuliefern, muss PHP (serverseitig) ran. Es bleibt also nur das sogenannte Browser-Sniffing. Im einfachsten Fall kann man das mit Abfrage des user agent realisieren. Beispiel:
$user_agent = $_SERVER["HTTP_USER_AGENT"];
if(preg_match("/(android|webos|avantgo|iphone|ipod|ipad|bolt|boost|cricket|docomo|fone|hiptop|opera mini|mini|kitkat|mobi|palm|phone|pie|tablet|up\.browser|up\.link|webos|wos)/i",$user_agent )) {
echo "mobile device detected";
}else{
echo "mobile device not detected";
}
Wesentlich eleganter, variabler, und weniger fehleranfällig ist die PHP-Klasse Mobile_Detect.php. Der Aufruf erfolgt mit diesem PHP-Snippet:
<?php
if (file_exists("Mobile_Detect.php")) {
require_once "Mobile_Detect.php";
$detect = new Mobile_Detect;
}
?>
Die Variable $detect nutzt man dann, um mittels einer if / else Bedingung den jeweils passenden Inhalt auszuliefern. Das folgende Beispiel liefert für Smartphones ein Video mit kleineren Abmessungen und deutlich kleinerer Dateigröße aus.
<?php
if ($detect->isMobile() && !$detect->isTablet()){
echo '<video src="videos/video_small.mp4" type="video/mp4"></video>';
} else {
echo '<video src="videos/video_big.mp4" type="video/mp4"></video>';
}
?>
Nachtrag 19.03.2023
Neue iPads, aber auch Windows Surface Tablets, werden von Mobile Detect nicht als Tablets, sondern als Computer erkannt. Dies liegt offensichtlich daran, dass diese Geräte im User Agent keinen Hinweis auf ein Tablet enthalten.
Der User Agent eines iPad 9 lautet beispielsweise:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.3 Safari/605.1.15Der Entwickler findet anscheinend für dieses Problem auch keine Lösung.
Artikeltexte und Code-Snippets: Creative Commons CC BY-SA 4.0
Medien (Bilder, Videos, Audios) sind evtl. urheberrechtlich geschützt.
Kommentare
Über Ihren Kommentar zu diesem Artikel freue ich mich.
Wenn Sie aber Fragen haben, und eine Antwort erwarten, nutzen Sie bitte das Supportforum! Die Nutzung des Forums ist auch ohne Registrierung möglich.