PHP: Browserweiche für Mobilgeräte

Mit der kontinuierlich steigenden Verfügbarkeit und Verbreitung von Smartphones und Tablet-Computern ist "Responsive Design" eines der wichtigsten Themen in der Webentwickler-Praxis geworden. Dieses Schlagwort beschreibt die Konzeption von Webauftritten von Anfang an mit besonderem Augenmerk darauf, dass unabhängig von den technischen Gegebenheiten des Betrachters eine optimale Zugänglichkeit der Inhalte gewährleistet ist - egal, ob die Site auf einem älteren iPhone mit 320×480 Pixel Bildschirmauflösung angesehen wird oder auf einem Monitor, der an einen stationären Rechner unter WUXGA-Einstellungen (1920×1200 Pixel) angeschlossen ist. Verschiedene Plattformen mit verschiedenen verbundenen Sichtgeräten erfordern, dass die Entscheidung darüber, welche Templates vom zugrundeliegenden CMS mit welchen CSS-Definitionen ausgeliefert werden, dynamisch anhand einer Erkennung des jeweiligen Geräts getroffen wird.

Auch wenn es gutem Stil entspricht, Markup und Stylesheets bereits von vornherein so zu definieren, dass die Bildschirmauflösung - speziell die verfügbare Breite - das Layout nicht zerstört, sondern die Inhalte auf elegante Weise verschoben werden: Bestimmte Plattformen sind dafür berüchtigt, insbesondere CSS3-Standards nicht zu unterstützen bzw. in nicht erwünschter Weise zu interpretieren. Die Probleme des Internet Explorer bis einschließlich Version 8 mit CSS-Definitionen wie box-shadow oder border-radius oder auch der Einbindung von Webfonts sind wohlbekannt, auch wenn es hier für einige Elemente inzwischen Workarounds wie CSS3 PIE (http://css3pie.com) gibt. Kopfzerbrechen bereitet auch das Verhalten z. B. des iPad bei statisch definierten Hintergründen mittels background-attachment:fixed; - ohne (leider in der Umsetzung etwas hakelige) Tricks lässt sich das Apple-Gerät nicht zum beabsichtigten Verhalten überzeugen.

Es liegt also, wie oben bereits angedeutet, nahe, für Mobilgeräte (ebenso wie im selben Zug für den Internet Explorer) abweichende Stylesheet-Definitionen hinzuzuladen, die die generellen Einstellungen überschreiben. Wir können in PHP zwar nicht die aktuelle Bildschirmauflösung des Nutzers auslesen, über den User Agent - eine Zeichenkette, mit der sich der Browser beim HTTP-Zugriff am Server identifiziert - jedoch mit guter Genauigkeit das Betriebssystem und/oder die verwendete Software. Eine Möglichkeit, dies zu realisieren, sieht folgendermaßen aus:

01:
02:
03:
04:
05:
06:
07:
08:
09:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
<html>
	<head>
 
		<link href='/css/standard.css' rel='stylesheet' type='text/css'>
 
		<?php
 
		$override = "";
 
		// Mobilgeräte
 
		if (preg_match("/(alcatel|amoi|android|avantgo|blackberry|benq|cell|cricket|docomo|elaine
		|htc|iemobile|iphone|ipad|ipaq|ipod|j2me|java|midp|mini|mmp|mobi|motorola|nec-|nokia|palm|
		panasonic|philips|phone|playbook|sagem|sharp|sie-|silk|smartphone|sony|symbian|t-mobile|telus
		|up\.browser|up\.link|vodafone|wap|webos|wireless|xda|xoom|zte)/i", $_SERVER['HTTP_USER_AGENT'])) { 
 
			$override = "<link href='/css/standard-mobile.css' rel='stylesheet' type='text/css'>"; 
 
		};
 
		// IE 6, 7, 8
 
		if (preg_match("/(MSIE 6.0|MSIE 7.0|MSIE 8.0)/i", $_SERVER['HTTP_USER_AGENT'])) { 
 
			$override = "<link href='/css/standard-ie.css' rel='stylesheet' type='text/css'>";
 
		 };
 
		echo $override;
 
		?>
 
	</head>
	<body>
 
		[Markup]
 
	</body>
</html>

Standardmäßig wird in das Dokument also die CSS-Datei /css/standard.css eingebunden. Diese Definitionen können durch die Dateien /css/standard-mobile.css oder /css/standard-ie.css überlagert werden, vorausgesetzt, die dortigen Angaben überschreiben Stilzuweisungen der Standarddatei direkt. Die Sonderdefinitionen sollen aber natürlich auch nur dann hinzugeladen werden, wenn der User-Agent auch vernünftigerweise die Annahme zulässt, wir haben es hier mit einem Mobilgerät oder dem IE zu tun. Die Auswertung des User-Agents, vorgehalten in der Umgebungsvariable $_SERVER['HTTP_USER_AGENT'], wird mittels Regular Expressions vorgenommen, die Zeichenketten festlegen, deren Vorkommen im User-Agent das Einbinden der Überlagerungs-CSS-Dateien auslösen.

Natürlich kann im folgenden noch eine weitere Analyse und Verarbeitung der User-Agent-Information erfolgen; das grundlegende Vorgehen ist aber dasselbe. Es sollte nur dringend davon Abstand genommen werden, die eval()-Methode auf non-sanitized-Inhalte von $_SERVER['HTTP_USER_AGENT'] anzuwenden, um keinen Angriffsvektor für User-Agent-Injections zu liefern. User-Agents können nämlich auch gefälscht und mit Schadcode gefüllt werden!

Autorin: Maren Arnhold