Dafür müssen die Entwickler-Tools bei Safari freigeschaltet werden (Einstellungen -> Erweitert -> “Menü Entwickler in der Menüleiste anzeigen”):

Ist dies gemacht wird im Safari das Entwickler-Menü eingeblendet mit vielen nützlichen Funktionen. Unter anderem auch “User Agent”, mit welcher der gesendete User-Agent verändern kann.

Wähle ich nun “Safari iOS 4.3.3 – iPhone” und mache wieder den Vergleich mit einem iPhone Printscreen sieht das Ergebnis folgendermassen aus:

iPhone

Safari mit iPhone User-Agent

Leider habe ich bisher noch keine brauchbare Extension für den Safari gefunden mit welcher ich die Fenstergrösse Pixelgenau einstellen kann.

Für dieses Problem gibt es verschiedene mögliche Lösungen:

• Man verfügt über einen ausserordentlich zahlungskräftigen Kunden oder sehr gute Beziehungen zu den Herstellern und beschafft sich alle gängigen Geräte mit unterschiedlichen Browsern und Bildschirm Auflösungen. Aber mal ehrlich.. wirklich? Sehr unwahrscheinlich
• Man nutzt frei verfügbare Emulatoren im Web wie zB.
  • www.testiphone.com
  • www.iphonetester.com
  • www.ipadpeek.com
  • usw.. nutzt Google

  Das Problem wo ich hierbei aber sehe ist, dass man nie sicher sein kann, welcher Agent-Code verwendet wird und was für eine Browser-Engine verwendet wird. Deshalb nicht meine Lieblings-Variante.

• Viele Hersteller von Smartphones oder Netbooks bieten Entwickler-Tools an, welche meist auch einen Emulator enthalten. Bestimmt die sicherste Variante, aber auch aufwendig sich in alle Entwickler-Tools der Hersteller einzuarbeiten. Auf der Seite www.mobilexweb.com/emulators findet ihr eine schöne Zusammenfassung von nützlichen Emulatoren. Ich werde meine eigene Webseite nach und nach an Mobile Browser anpassen und die verschiedenen Emulatoren genauer betrachten.
• Ich persönlich arbeite während der Entwicklung am liebsten mit dem Firefox. Egal ob ich das Layout für Desktop-Browser oder mobilen Browser mache.
  Firefox kann dem Server einen anderen User-Agent Code senden und somit vorgaukeln, er wäre ein Smartphone, Netbook oder was man halt gerade braucht. Dazu öffnet man die about:config und setzt folgende Variabel:

  general.useragent.override = Mozilla/5.0 (iPhone; CPU iPhone OS 5_0 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9A334 Safari/7534.48.3

  Nach einem Neustart des Firefox sendet er nun den gleichen User-Agent Code zum Server wie ein Safari auf einem iPhone mit iOS5.

  

  Firefox normal

  

  Firefox mit iPhone4 User-Agent

  Was jetzt noch fehlt ist die Anpassung der Auflösung. Ich nutze dafür die Firefox-Extension “Web Developer” und stelle dort die Fenstergrösse entsprechend der Auflösung des zu simulierenden Smartphone ein. Das Resultat sieht folgendermassen aus:

  

  iPhone

  

  iPhone mit Firefox simuliert

  Ist nicht perfekt, aber man spart bei der Entwicklung Zeit, welche später für ein ausführliches Testen mit dem fertigen Layout verwendet werden kann.
  Natürlich ist mir klar, dass ein Browser-Engine einen entscheidenden Einfluss auf das Erscheinungsbild der Webseite auf den Endgeräten spielt und dass dies ein Firefox nicht simulieren kann. Diese Methode ersetzt auch das Teste der Webseite in den entsprechenden Browsern (oder zumindest Emulatoren) nicht.

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();
}

Ich freue mich auf den Tag, an dem man HTML5 und CSS3 produktiv einsetzen kann. Leider wird es wohl noch etwas gehen bis da alle Browser mitziehen und die alten Version vernachlässigt werden können..

Vor kurzem bin ich aber auf der Webseite von Namics auf Ethik Grundsätze gestossen, welche kurz genug gehalten sind, um einprägsam zu sein und doch alle, für die Webentwicklung, wichtigen Themen behandeln:

• Kooperation und Respekt (Respect for the Individual)
• Kundenbedürfnisse haben Vorrang (Client Interests First)
• Professionelle Entwicklung (Professional Development)
• Kunden in Wettbewerbssituation (Competing Clients)
• Projektannahme mit Verantwortung (Accepting Projects)
• Vertraulichkeit (Confidentiality)
• Keine Austrittsbarrieren (Lock-In)
• Integrität (Integrity)
• Unabhängigkeit (Independence)
• Keine finanzielle Verflechtung (Financial Arrangements)
• Internet-Prinzipen (Internet Principles)

Selbstverständlichen müssen diese Grundsätze gelebt werden und dürfen nicht nur leere Worte auf Papier sein. Der Artikel ist auf jeden Fall lesenswert.

Weitere Links zu diesem Thema:

• Ethikrichtlinien der Schweizer Informatik Gesellschaft