Mobile Web Design

Eine explizit für mobile Geräte (also “Handys”) optimierte Website sollte unbedingt trotzdem den “viewport meta tag” mitbringen.

Wieso trotzdem? Was macht dieser “viewport meta tag” denn eigentlich?
Dieser meta tag wurde ursprünglich von Apple eingeführt, um die Darstellung von “normalen” Webseiten  auf dem iPhone besser zu kontrollieren. Per default geht es von einer Standard-Webseiten-Breite von 980px aus und skaliert die passend runter. Hat man abweichende Breiten aus seiner Website, kann man über verschiedene Parameter “das Ding passend machen”. (Alle Details dazu im Safari Dev Center.)

Aber warum dann in einer mobil optimierten Seite verwenden?
Das pure Vorhandensein des viewport meta tag zeigt an, dass der Website-Anbieter bereits eine Optimierung vorgenommen hat, und diverse “ich skalier Dich mal runter” Mechanismen bzw. automatische Optimierungen (aka small screen rendering) seitens des mobilen Browsern mögen bitte ausbleiben.

Im Opera-Mobile beispielsweise wäre die ganze Mobil-Optimierung umsonst gewesen, denn der versucht sonst selber, die Seite “mobil-freundlich” darzustellen - und das will man hier nicht. Hier will man, dass der Browser die bereits mobil-optimierte Seite nicht mehr verändert, sondern unangetastet darstellt. Auch andere Browser ziehen hier sukzessive nach.

Zitat: “… the presence of the viewport meta tag in the page’s head section indicates the author has taken care of optimizing for mobile, small screen rendering is not applied.” (Quelle: http://dev.opera.com/articles/view/opera-mobile-9-5-the-developer-angle/)

Langer Rede kurzer Sinn, mit diesen Parametern geht es ganz gut:

<meta name = “viewport” content = “width = device-width,  initial-scale=1″ />Man könnte width oder height auch mit Pixelangaben* fest verdrahten, dies ist aber selten sinnvoll. Nimmt man statt dessen wie oben empfohlen device-width und device-height, dann passt sich die Seite an die Auflösung (VGA, QVGA, WVGA , WQVGA, etc.)  des mobilen web client gut an.

(*Achtung, das wäre dann z.B. “width = 240″ und nicht “width = 240px“!)

- - -

Nachtrag:
Der viewport meta tag funktioniert immerhin “… in many smartphone browsers, including Safari Mobile for the iPhone, Android browser, webOS browser in Palm Pre and Pixi devices, Opera Mini, Opera Mobile and BlackBerry browsers.”
Quelle: http://learnthemobileweb.com/2009/07/mobile-meta-tags/