Sprung zum Inhalt

Webdesign nach Maß von webdesign weisshart

Mein Blog

RSS Feed AbonnementRSS 2.0 Feed

zum Archiv und den Kategorien

CSS für iPhone 4 (und iPad?)

Montag, 14. Juni 2010

Seit langem statte ich meine Seiten mit einem fürs mobile Surfen optimierten CSS aus. Weil mobil Surfen, so ist jedenfalls mein Eindruck, erst wirklich Spaß macht, seit es das iPhone gibt, habe ich mir auch angewöhnt, die Anzeige gleich auf die verfügbare Breite des Geräts (in der Hochformat-Ansicht) einzustellen.
Dazu dient folgender Meta-Tag:

<meta name="viewport" content="width=320" />
Weil das Display des iPhone eben 320 px in der Breite auflöst.

Aber jetzt kommt das iPhone 4 mit 640 px. Und obiger Meta-Tag wird dazu führen, dass die Anzeige die doppelte Breite des Displays einnimmt, also zu horizontalem Scrollen zwingt. Eine Horrorvorstellung. Was tun?

<meta name="viewport" content="width=640" />
führt auf iPhones < 4 dazu, dass eine Webseite nur noch in Briefmarkengröße dargestellt wird.

Aber Safari stellt eine wesentlich elegantere Methode zur Verfügung:

<meta name="viewport" content="width=device-width, user-scalable=yes" />

Der Wert device-width liest die auf dem Gerät verfügbare Breite aus, anstelle einer festen Angabe in Pixel.
Und user-scalable=yes ermöglicht das Zoomen. Ohne diese Angabe lässt das Meta-Tag Zoomen nicht zu. Ganz Böse! Man wäre auf horizontales Scrollen angewiesen, um die Seite zu lesen.

Screenshot iPhone
Demoseite
Die Demo macht natürlich nur mit dem iPhone Sinn, oder einem User Agent Switcher, z. B. diesem Firefox Add-on



Referenz

Anmerkung: Was das iPad mit diesen Angaben wohl macht? Vielleicht könnte mal ein "iPadler" einen Blick darauf werfen.



1 Kommentar

  1. Man lernt doch nie aus. Vielen Dank, Du bist wie immer auf der Höhe der Zeit.

    Gruß Matthias

    Kommentar von Matthias — Donnerstag, 22. Juli 2010 - 10:15 Uhr

Einen Kommentar abgeben

Damit Code-Beispiele richtig angezeigt werden, müssen Sonderzeichen maskiert werden (z.B. < zu &lt;).


(notwendig)

(notwendig)

Spamschutz:
Je nach Inhalt wird Ihr Kommentar eventuell nicht sofort angezeigt, sondern muss manuell freigeschaltet werden.

Archiv:

Kategorien:

Creative Commons Lizenzvertrag
Alle Texte (nicht Bilder!) Creative Commons CC BY-NC-SA 3.0 DE