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.

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.