Ich möchte mich in den nächsten Posts näher mit dem Thema Mobiles Web beschäftigen. Teilweise reicht es heutzutage nicht mehr aus eine Webseite nur an die gängigen Desktop-Browser (Firefox, Safari, Opera und leider immernoch Internet Explorer) anzupassen. Mittlerweile sind Smartphones oder Tablets so verbreitet, dass sich eine Anpassung des Layouts an diese Geräte durchaus lohnt und es je nach Zielgruppe bereits ein Imageverlust darstellt, wenn die Webseite noch nicht Mobile-fähig ist (ich weiss.. ich arbeite daran 
).
Der erste Post dieser Serie behandelt den ersten Arbeitsschritt beim anpassen des Layouts an Mobile Browser: die Browserweiche. Es gibt verschiedene Alternativen, alle gemeinsam haben sie, dass der Browser, das für ihn angepasste CSS-File interpretieren soll.
CSS Media Attribut
Via das Media Attribut können nicht nur typische Media-Typen wie “screen” oder “print” usw.. mitgegeben werden, sondern auch Werte wie min-width, max-width oder auf einzelne Browser bezogene Werte:
<link rel="stylesheet" type="text/css" media="screen and (min-width: 961px)" href="desktop.css" />
<link rel="stylesheet" type="text/css" media="only screen and (max-width: 960px)" href="mobile.css" />
<link rel="stylesheet" type="text/css" media="only screen and (-webkit-min-device-pixel-ratio: 2)" href="iphone4.css" />
Ihr merkt es sicher schon: diese Methode erinnert start an CSS-Hacks, welche mir mittlerweile ziemlich verleidet sind. Dazu kommt, dass die Unterscheidung, ob es sich um einen Desktop- oder Smartphone-Browser handelt, durch immer neuere Display’s mit immer höheren Auflösungen zunehmen schwierig und unzuverlässig wird. Deshalb rate ich von dieser Methode ab, zum Glück gibts ja Alternativen.
Umleiten via User-Agent
Viel zuverlässiger ist es, wenn man den User-Agent Code des Browser nutzt, um zu entscheiden, ob es sich um einen Mobilen Browser handelt oder nicht. Um diesen Abzufragen kann JavaScript genutzt werden:
<script type="text/javascript">
document.write(navigator.userAgent);
</script>
Als Result bekommt man folgender Code, welcher einem iPhone 4 Safari entspricht.
Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_0 like Mac OS X; en-us) AppleWebKit/532.9 (KHTML, like Gecko) Version/4.0.5 Mobile/8A293 Safari/6531.22.7
Jeder Browser besitzt seinen eigenen User-Agent Code, welcher Informationen zum Applikationsnamen, Version, Plattform, Technologie usw.. enthält. Eine Sammlung von User-Agent Codes findet man unter www.useragentstring.com.
Macht man sich etwas über die User-Agent Codes der Mobilen Browser schlau, wird man feststellen, dass alle iPhone Safari’s dass Wort “iPhone” für die Plattform in ihrem User-Agent Code enhalten. Bei einer Browserweiche mit den User-Agent Codes müssen also nicht alle möglichen User-Agents (für Plattform, Version usw..) abgefangen werden, es muss nur nach verwertbaren Gemeinsamkeiten gesucht werden.
Im folgenden Beispiel möchte ich also alle Zugriffe, welche von einem iPhone- oder Android-Smartphone kommen, auf eine speziell, für Mobile Browser, angepasste Seite umleiten:
<script type="text/javascript">
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/Android/i))) {
window.location = "http://m.ihreseite.ch";
}
</script>
Eine andere Methode um Benutzer auf eine, für Mobile Browser angepasste Seite, umzuleiten ist die Umleitung via .htaccess File. Ähnlich wie bei der JavaScript Variante wird der User-Agent Code nach verwertbaren Wörtern durchsucht. Dazu wird folgender Code in der .htaccess Datei benötigt:
RewriteEngine on
RewriteCond %{HTTP_USER_AGENT} ^.*iPhone.*$
RewriteRule ^(.*)$ http://m.ihreseite.ch [R=301]
RewriteCond &{HTTP_USER_AGENT} ^.*Android.*$
RewriteRule ^(.*)$ http://m.ihreseite.ch [R=301]
Interpretieren des User-Agents in PHP
Das interpretieren des User-Agents im Backend ist meine favorisierte Variante. Man muss keine Subdomain erstellen (wie bei einer Umleitung) und ist trotzdem flexibel genug, um, falls notwendig, auch die HTML Struktur anzupassen.
In PHP kann der User-Agent mit Hilfe der Server-Variabel “HTTP_USER_AGENT” abgefragt werden. Folgender Code fügt die mobile.css in die Webseite ein, wenn sich im User-Agent Code die Wörter iPhone oder Android befinden:
if(strstr($_SERVER['HTTP_USER_AGENT'], 'iPhone') ||
strstr($_SERVER['HTTP_USER_AGENT'], 'Android')) {
echo "
}
Natürlich lässt sich auf diese Weise auch eine Umleitung realisieren:
if(strstr($_SERVER['HTTP_USER_AGENT'], 'iPhone') ||
strstr($_SERVER['HTTP_USER_AGENT'], 'Android')) {
header('Location: http://m.ihreseite.ch');
exit();
}
