Benutzung des “Viewport Meta Tags” für die Layout Einstellung mobiler Browser

Die Veröffentlichung des Mobile Firefox (Fennec) ist mit einem besseren Support für das viewport meta tag ausgestattet. Vorhergehende Versionen von Fennec unterstützten die Breite, die Höhe und Einstellungen des ursprünglichen Maßstabs für das Ansichtsfenster, wiesen aber Probleme mit einigen Seiten auf, die für das iPhone und Android Browser konzipiert waren. Jetzt unterstützt auch die mobile Firefox Version die selben Einstellungen wie Mobile Safari und Fennec wurde so verändert, dass mobile Seiten besser mit Bildschirmen verschiedener Größen und Auflösungen kompatibel sind.

Beispiel

touch.facebook.com vorher:

touch.facebook.com danach:

Sie können diese Veränderung selbst in der neuesten Fennec Version sehen und Nightly-Builds für Maemo, Windows, Mac, oder Linux herunterladen.

Hintergrund

Mobile Browser wie Fennec zeigen Seiten in einem virtuellem “Fenster” (dem Ansichtsfester) an, welches normalerweise breiter als der Bildschirm ist, damit sie nicht jedes Seitenlayout in ein kleines Fenster quetschen müssen (was den Rahmen vieler nicht mobil optimierter Seiten sprengen würde). Nutzer können schwenken und zoomen, um verschiedene Teile der Seite zu sehen.

Mobile Safari führte den “viewport meta tag” ein, um Webentwicklern die Kontrolle über die Größe und den Maßstab des Ansichtsfensters zu überlassen. Viele andere mobile Browser unterstützen dieses meta tag nun, obwohl es nicht Teil irgendeines Web Standards ist. Apple’s Dokumentierung leistet gute Arbeit beim Erklären, wie Webentwickler dieses tag nutzen können.

Mehr über Ansichtsfenster in verschiendenen mobilen Browser in “A Tale of Two Viewports” gibt es auf quirksmode.org.

Mate Tag Viewport Grundlagen

Eine typische mobil optimierte Seite beinhaltet etwa folgendes:

Die Breiteneinstellung kontrolliert die Größe des Ansichtsfensters. Es kann mit einer spezifischen Pixelanzahl eingestellt werden, beispielsweise mit einer Breite=600 oder mit einem auf die Breite des Gerätes bezogenen Spezialwert, welcher der Breite des Bildschirms in Pixel entspricht (Es gibt übereinstimmende Höhen und die Höhenwerte des Gerätes, welche nützlich für Seiten mit Elementen sind, die ihre Größe oder Position basierend auf der Höhe des Ansichtsfensters verändern)

Die ursprünglichen Maßstabseinstellungen kontrollieren den Grad des Zooms, wenn die Seite erst einmal geladen ist. Der maximale und minimale Maßstab, sowie die vom Benutzer skalierbaren Einstellungen kontrollieren, wie nah oder weit die Nutzer die Seite heran oder wegzoomen können.

A pixel is not a pixel is not a pixel

Das iPhone und viele beliebte Android Telefone haben 3- bis 4-Zoll (7–10 cm) Bildschirme mit 320—480 Pixel (~160 dpi). Firefox für Maemo läuft auf dem Nokia N900, welches die selbe Größe hat, aber 480—800 pixels (~240 dpi). Deswegen zeigte die letzte Fennec Version viele Seiten ein Drittel kleiner an (im Vergleich zur realen Größe) als das iPhone oder Android Geräte. Dies beeinträchtigte die Benutzerfreundlichkeit und Lesbarkeit vieler touch-optimierter Webseiten. Peter-Paul Koch schrieb über dieses Problem in “A pixel is not a pixel is not a pixel”.

Fennec 1.1 für Maemo wird 1.5 Hardware Pixel für jedes CSS “Pixel,” nutzen und folgt somit dem Beispiel von Android’s auf dem WebKit-basierendem Browser. Dies bedeutet eine Seite mit einem ursprünglichem Maßstab =1 wird diesselbe physische Größe sowohl in Fennec als auch in Maemo, Mobile Safari für iPhone näher anzeigen, und den Android Browser sowohl auf HDPI als auch auf MDPI Telefonen. Dies ist vereinbar mit der CSS 2.1 Spezifizierung, die besagt:

Wenn die Pixelstärke des Ausgabegerätes sich sehr von der eines typischen Computerbildschirms unterscheidet, sollte der User Agent die Pixelwerte neu einstellen. Es wird empfohlen, dass sich die Pixeleinheit auf die Anzahl der Pixel des Gerätes, welches dem Referenzpixel am nächsten kommt, bezieht.

Für Web-Entwickler bedeutet dies, dass 320px in der vollen Breite des Potrait Modus, auf allen oben genannten handheld Geräten im Maßstab=1 ist und diese ihre Layout und Bilder dementsprechend ordnen können. Aber denken Sie daran, dass nicht alle mobilen Geräte die selbe Breite haben, ebenso sollten Sie sicherstellen, dass ihre Seiten im Landschaftsmodus und auf größeren Geräten wie dem iPad und Android Tablets funktionieren.

Auf 240-dpi Bildschirmen, werden Seiten mit einem ursrpünglichen Maßstab=1 von Fennec und Android WebKit auf die Größe 150% herangezoomt. Den Text wird man problemlos und präzise erkennen können, aber bei den bitmap Bildern wird man wahrscheinlich keinen Vorteil aus der Vollbildschirmauflösung ziehen können. Um schärfere Bilder auf diesen Bildschirmen zu erhalten, werden Webdesigner Bilder – oder ganze Layouts – in 150% größer als ihre endgültige Größe designen wollen (oder 200%, um das berüchtigte 320-dpi iPhone zu unterstützen) und diese anschließend zu reduzieren, indem sie CSS oder Viewport Einstellungen verwenden.

Die Fehlerquote ist abhängig von der Bildschirm Dichte. Auf einem Bildschirm mit einer Dichte von weniger als 200dpi, liegt sie bei 1.0. Bei Bildschirmen mit Dichten zwischen 200 und 300 dpi, liegt die Quote bei 1.5. Für Bildschirme mit einer Dichte über 300 dpi, ist die Quote der integer floor (Dichte/150dpi). Nehmen Sie Kenntnis davon, dass die Fehlerquote nur dann stimmt, wenn die Viewport Maßstab 1.0 beträgt. Ansonsten hängt die Beziehung ziwschen CSS Pixel und Geräte Pixel von dem aktuellen Zoomwert ab.

Ansichtfensterbreite und Bildschirmbreite

Viele Seiten stellen ihren Viewport auf “Breite=320, ursprünglicher Maßstab=1” ein, um genau auf das Display des iPhones im Portraitmodus zu passen. Wie bereits oben erwähnt, verursachte dies Probleme, wenn Fennec 1.0 diese Seiten wiedergab, vor allem im Landschaftsmodus. Um dieses Problem zu lösen, wird Fennec 1.1 wenn nötig die Breite des Ansichtsfensters erweitern, um den Bildschirm in dem erwünschten Maßstab auszufüllen. Diese vereinbart das Verhalten von Android und Mobile Safari, und ist besonders nützlich auf Geräten mit breitem Bildschirm wie dem iPad (Allen Pike’s “Choosing a viewport for iPad sites” bietet gute Erklärungen für Webentwickler)

Für Seiten, die einen ursprünglichen oder maximalen Maßstab festlegen, bedeutet dies, dass sich die Breiteeinstellung tatsächlich an ein Minimum der Breite des Ansichtsfensters anpasst. Beispielsweise wenn Ihr Layout ein Mindestenbreite von 500 Pixel benötigt, können Sie folgendes Markup nutzen. Wenn der Bildschirm breiter als 500 Pixel ist, wird der Browser das Ansichtsfenster erweitern (anstatt es heranzuzoomen) damit es auf den Bildschirm passt:

Fennec 1.1 fügt ebenso Support für einen Minimalmaßstab, einen Maximalmaßstab und benutzterdefiniertem Maßstab bei, mit Fehlern und Limits ähnlich wie bei der Version von Safari. Diese Einstellungen betreffen den ursprünglichen Maßstab und die Breitem ebenso wie einschränkende Veränderungen im Hinblick auf den Zoombereich.

Mobile Browser gehen mit Orientungsänderungen etwas anders um. Zum Beispiel zoomt Mobile Safari oft nur die Seite, wenn es vom Portrait Modus zum Landschaftsmodus wechselt, anstatt die Seite weiter zu machen, wie es dies tun würde, wenn die Seite ursprünglich im Landschaftsmodus geladen werden würde. Wenn Webdesigner wollen das ihre Maßstabseinstellungen einheitlich bleiben, wenn die Richtungen auf dem iPhone verändert werden, müssen sie einem maximalen Maßstabswert hinzufügen, um dieses Zooming, welches manchmal den unerwünschte Nebeneffekt hat, den Nutzer vom Heranzoomen abzuhalten, zu verhindern:

Dies ist nicht nötig mit Fennec; wenn das Gerät seine Orientierung ändert, aktualisiert Fennec die Größe des Ansichtsfensters, das Seitenlayout, und JavaScript/CSS Einstellungen passend auf die Breite des Gerätes basierend auf seiner neuen Fenstergröße

Richtlinien

Es gibt eine deutliche Nachfrage nach dem Viewport meta tag, seitdem es von den meisten beliebten mobilen Browsern unterstützt wird und von tausenden von Webseiten genutzt wird. Es wäre gut, klare Richtlinien für Webseiten zu haben, um Viewporteinstellungen regeln zu können. Laut HTML5 spec, sollten Vergrößerungen des meta Elements zunächst auf WHATWG wiki registriert werden und dann den W3C standards Prozess durchlaufen.