Sprung zum Inhalt

Webdesign nach Maß von webdesign weisshart

CSS für das iPhone live testen

Klar, jede Webseite kann man mit dem iPhone und fleissigem Zoomen (mit Daumen und Zeigefinger) und Herumgeschiebe des für den Monitor zu großen Inhalts irgendwie betrachten. Aber Übersichtlichkeit ist etwas anderes. Ich bediene daher auch das iPhone mit dem Stylesheet für Handhelds und Handys. Also linearisiert und auf das Wesentliche reduziert. Das Ergebnis sieht dann folgendermaßen aus:

Screenshot der Startseite von webdesign weisshart auf dem iPhone

CSS Weiche für Handhelds

Es gibt verschiedene Methoden, für Handhelds & Co. spezielle CSS-files auszuliefern. Ich verwende folgende serverseitige Browserweiche:

<?php
$agents = array(
    'Windows CE', 'Pocket', 'Mobile',
    'Portable', 'Smartphone', 'SDA',
    'PDA', 'Handheld', 'Symbian',
    'WAP', 'Palm', 'AvantGo', 'iPhone', 'BlackBerry', 'MOT-',
    'cHTML', 'BlackBerry', 'Opera Mini',
    'Nokia', 'Palm', 'Blazer', 'SonyEricsson', 'Minimo'
);

for ($i=0; $i<count($agents); $i++) {
	if(isset($_SERVER["HTTP_USER_AGENT"]) 
   && strpos($_SERVER["HTTP_USER_AGENT"], $agents[$i]) !== false) {
	   $sitestyle = "/styles/handheld.css";
   }
}
?>

<link rel="stylesheet" media="screen" 
href=" <?php echo (!$sitestyle)?'/styles/main.css':"/".$sitestyle ?>" 
type="text/css" />

Erklärung:
Im array $agents werden charakteristische Anteile der User Agent Strings der häufigsten Handhelds eingetragen, darunter eben auch "iPhone".

Der komplette User Agent String des iPhone lautet:
Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543a Safari/419.3
Quelle: www.zytrax.com/tech/web/mob...

Nachtrag: Um den jeweils aktuellen User Agent String zu finden, gibt es eine geradezu geniale Methode.

Das CSS

Nun können wir also daran gehen, eine eigene CSS-Datei namens iPhone.css zu schreiben. Das iPhone unterstützt CSS 2.1, und teilweise sogar CSS 3. Wir können also alle üblichen CSS Anweisungen einsetzen, und sogar noch etwas mehr. Aber darum geht es hier nicht. Vielmehr geht es darum, unser CSS bereits während der Entstehung auf möglichst einfache Weise zu testen .

Die "normale" Vorgehensweise wäre:

  1. Änderungen am CSS durchführen,
  2. CSS file per FTP auf den Server laden,
  3. am iPhone das Ergebnis kontrollieren;

und das eben für jede Änderung wieder und wieder. Sehr mühsam!

Die Arbeitsumgebung aufsetzen

Das geht viel flotter mit 2 Firefox Extensions, die jeder Webworker vermutlich ohnehin bereits installiert hat:

Nachdem also beide Extensions intalliert sind, können wir folgende Arbeitsumgebung aufbauen:

Schritt 1

Wir schaffen uns mit der User Agent Switcher Extension einen User Agent, der dem Server einen iPhone vorgaukelt:

Edit User Agents - User Agent - New - New User Agent
dort geben wir in die Zeile User Agent ein:

Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420 
 (KHTML, like Gecko) Version/3.0 Mobile/1A543a Safari/419.3

Wir wählen nun in der User Agent Switcher Extension diesen User Agent, und rufen die Seite neu auf. Damit gaukeln Firefox dem Server vor, dass die Seite von einem iPhone angefordert wurde, und er liefert unser Stylesheet iPhone.css aus. Wir haben eine perfekte iPhone-Emulation auf dem Firefox.

Schritt 2

Nun können wir in der Web Developer Extension aufrufen: CSS - CSS bearbeiten. Es öffnet sich, je nach Konfiguration der Web Developer Extension, eine Sidebar im Browser, in der wir das CSS live editieren, und die Auswirkungen jeder Änderung sofort live im Browser kontrollieren können. Das fertige CSS kann direkt aus der Web Developer Extension heraus gespeichert werden, und muss anschließend nur noch auf den Server hochgeladen werden. So sieht die Arbeitsumgebung im Firefox aus:

Screenshot Firefox mit iPhone Emulation und Web Developer Extension CSS

Viel Spaß beim Entwickeln schöner Seiten für das iPhone.

Auch in meinem Blog gibt es einige interessante Artikel zum Thema iPhone zu finden.

Andernorts zum diesem Thema:
www.perun.net/2008/09/27/css-fuer-iphone-und-ipod-touch/
www.vorsprungdurchweb standards.de/theory/faq-websites-fuer-das-iphone-gestalten/

4 Kommentare

  1. iPhoner schrieb am Dienstag, 05.01.10 00:12 Uhr:

    Selten eine Seite angetroffen, die mit dem iPhone so gut zu bedienen ist. Respekt!

  2. FrKo schrieb am Donnerstag, 04.02.10 23:54 Uhr:

    Einfach klasse diese Beschreibung. Ich will als kleines Projekt eine bestehende Website eines Hotels für das IPhone fit machen und das war genau die Hilfe, die ich gescuht habe!! Danke

  3. Christoph Jochum schrieb am Samstag, 26.03.11 22:36 Uhr:

    Vielen Dank für die kurze aber hoch effektive Anleitung.
    Ich habe gerade angefangen, meine Website auch für handhelds verfügbar zu machen, und da kam mir dieser Beitrag gerade recht.

  4. Peter schrieb am Sonntag, 18.12.11 15:30 Uhr:

    Zu beachten ist jedoch, dass wir zwar dem Server ein smartphone vorgaukeln, der damit auch richtigerweise das CSS für mobile Geräte ausliefert, wir aber dennoch eine rendering engine weitab vom smartphone haben.

    Nach meiner Erfahrung rendern die smartphone browser doch etwas anders als es die Desktop-Browser tun.

    Selbst der Opera Mobile Emulator zeigt in seinem Viewport nicht das, was ich z.B real auf dem Galaxy sehe.

    Für die grundlegenden Formatierungen ist die Vorgehensweise geeignet, für das Feintunig würde ich aber unbedingt auf das smartphone meiner Wahl setzen.

Ihr Kommentar zu diesem Artikel:

Über Ihren Kommentar oder Ihre Frage zu diesem Artikel freue ich mich. Ich behalte mir jedoch vor, Einträge wider die guten Sitten, unsinnige Einträge, oder Spam kommentarlos zu entfernen.