Homepage-Optimierung fürs iPhone

Aus Desktop-Browsern ist das Prinzip des Viewports bereits bekannt - das ist die Fläche innerhalb des Browser-Fensters, die der Anzeige von Webseiten dient. Safari auf dem iPhone/iPod Touch erweitert dieses Konzept.Sofern ihm eine Webseite nichts anderes vorgibt, geht der mobile Browser von einem 980 Pixel breiten Viewport aus - groß genug für die meisten Websites. Aus diesem Standard-Viewport leitet Safari einen Skalierungsfaktor ab, der so berechnet wird, dass er in seiner gesamten Breite auf dem Display des Gerätes erscheint.Die Größe des Displays beträgt je nach Ausrichtung des Gerätes 320 x 480 (hochkante Ausrichtung, sog. Portrait-Mode), beziehungsweise 480 x 320 Pixel (horizontal, Landscape-Mode). Netto, also nach Abzug von Safaris Bedienelementen bleiben davon 320 mal 356 beziehungsweise 480 x 208 Pixel übrig. Weil der Landscape-Mode in der Breite mehr Platz bietet, muss der Viewport hier weniger stark verkleinert werden, Texte und Bilder erscheinen also größer als im Portrait-Modus.Wenn die Breite der eigenen Webseiten deutlich von der des Standard-Viewports abweicht, dann ist die Darstellung suboptimal. Insbesondere schmalere Seiten zeigt Safari unnötig klein an, da auch die leeren Bereiche des Viewports mitskaliert werden. In diesen Fällen sollten Sie Safari mit individuellen Parametern konfigurieren.

Sie müssen aber nicht alle drei Parameter (Höhe, Breite und Skalierung) von Hand setzen, sondern können sich auf einen der Parameter konzentrieren. Safari wird die übrigen Werte aus Ihrer Vorgabe ableiten. Dabei versucht er immer, möglichst viel Website im Display unterzubringen. Wie das in der Praxis funktioniert, verdeutlichen drei Beispiele.

1. Setzen Sie den Skalierungsfaktor auf 1,0, dann leitet Safari daraus eine Viewport-Breite von 320/480 Pixel (Portrait/Landscape) ab. Der durch Drehen des iPhones hervorgerufene Wechsel zwischen Portrait- und Landscape-Modus ist übrigens der einzige Fall, in dem der Benutzer die Größe des Viewports verändern kann. Denn Zoomen wirkt sich nur auf den Skalierungsfaktor aus. 2. Geben Sie den Viewport mit einer Breite an, die unterhalb der des Displays liegt, dann ergibt sich daraus ein Skalierungsfaktor > 1, das heißt, die Seite wird herangezoomt. Eine Breite von 320 Pixeln führt zum Skalierungsfaktor 1,0/1,5 (Portrait/Landscape), während 200 Pixel zum Faktor 1,6/2,4 führen. 3. Wenn Sie den Skalierungsfaktor und die Breite vorgeben, errechnet Safari die Höhe der Seite entsprechend des Seitenverhältnisses der sichtbaren Anzeigefläche. Bei einer Skalierung von 1,0 und einer Viewport-Breite von 980px ergibt sich im Portrait-Mode also eine Höhe von 356 / 320 * 980 = 1.090 Pixeln; im Portrait-Modus 425 Pixel hoch.

Metatag reloaded

Der Safari-Viewport wird über das gleichnamige Metatag parametrisiert. Möchten Sie einfach eine vorhandene Seite mit einer Breite von 650 Pixeln für das iPhone optimieren, dann verwenden Sie

Möchten Sie sich mit den Angaben für die Breite und/oder die Höhe (height) auf die Dimensionen des Displays beziehen, dann verwenden Sie dafür die Keywords device-width (320 Pixel) beziehungsweise device-height (480 Pixel) und sorgen so schon für künftige Gerätegenerationen mit höher auflösenden Displays vor. Den Skalierungsfaktor setzen Sie wie folgt auf 1,0:

Mit dem Parameter user-scalable können Sie den Besucher vor versehentlichen Zooms schützen:

Konditionales CSS

Mit dem Keyword handheld enthält CSS schon seit Längerem eine Möglichkeit, ein Stylesheet explizit für die Verwendung in mobilen Geräten zu kennzeichnen. Safari macht davon aber keinen Gebrauch. Stattdessen jubeln Sie dem iPhone mit

ein individuelles Stylesheet unter. Mit

könnten Sie theoretisch ein Stylesheet für größere Displays vorsehen. In der Praxis birgt das aber Tücken, denn die aus CSS3 entnommenen Keywords only und and führen in älteren Browsern dazu, dass das Stylesheet ignoriert wird.