Der Viewport auf mobilen Geräten und die Meta-Viewport-Angabe

RoDobby / Pixabay.com (Quelle: CC0 Creative Commons)

Wie bereits im Zusammenhang mit den Media Queries an anderer Stelle erwähnt, beziehen sich beispielsweise die Merkmale width und height auf die Breite bzw. Höhe des sog. Viewports. Bei der mobilen Entwicklung kommt diesem Element eine grundlegende Bedeutung zu.

Spricht man vom Viewport, muss man prinzipiell zwischen visuellem Viewport und Layout Viewport differenzieren. Der visuelle Viewport ist der Anzeigebereich im Browserfenster, der für die Darstellung des Seiteninhaltes tatsächlich zur Verfügung steht. Bereiche außerhalb des visuellen Viewports sind nicht sichtbar. Der Layout Viewport hingegen kann auch Inhalte enthalten, die nicht auf dem Display erscheinen. Mobile Browser legen den Layout Viewport bei flexiblen (also auf relativen Angaben beruhenden Layouts) auf eine feste CSS-Pixelgröße fest, damit diese sich ähnlich darstellen wie auf Desktop-Browsern. Auf dem iPhone bzw. im Safari Browser ist er 980px breit, Opera legt ihn auf 850px fest, der Android WebKit Browser auf 800px und der IE auf 974px. Bei Layouts mit absoluten Größenangaben wird der Layout Viewport i.d.R. auf die Breite des größten Elementes festgelegt. Beim Zoomen ändert sich ausschließlich der visuelle Viewport.

Man kann sich den Layout Viewport als eine Art großes Bild vorstellen, das sich in Form und Größe nicht verändert. Legt man nun einen kleineren Rahmen über jenes Bild, durch welchen man auf das große Bild blicken kann, wäre der Teil, den man durch den Rahmen erblicken kann der visuelle Viewport. Den Rahmen kann man vor- (hineinzoomen) und zurückbewegen (herauszoomen), um somit einen kleineren Teil oder das gesamte Bild zu betrachten. Die meisten Browser setzen beim erstmaligen Aufrufen einer Website den visuellen Viewport dem Layout Viewport gleich, d.h. sie zoomen weit möglichst heraus, um auch nicht-mobiloptimierte Websites darzustellen.

Bei mobiloptimierten Website – insbesondere bei flexiblen Responsive Layouts – führt das Standardverhalten der Browser jedoch dazu, dass mobile Websites ebenfalls auf die rund 980px Breite des Standard Layout Viewports ausgedehnt werden. Um diesem Problem zu entgegnen, wurde von iPhone Hersteller Apple die sog. Meta viewport Angabe entwickelt, über welche der Websitebetreiber die Breite des Layout Viewports festlegen kann (vgl. Koch 2014; W3C 2011b):

viewport1Unbenannt

Inzwischen hat sich als best practice etabliert, die Layout Viewport width mit der device-width gleichzusetzen:

viewport2Unbenannt

Die zusätzliche Angabe initial-scale=1.0 verhindert, dass bestimmte Geräte (u.a. das iPad) initial an die Seite heranzoomen. Der Zoomfaktor wird also auf 1 festgelegt. Mit der Angabe user-scalable kann zusätzlich verhindert werden, dass der User zoomen kann. Zudem kann mit den Angaben minimum-scale und maximum-scale der minimale bzw. maximale Zoomfaktor eingeschränkt werden (vgl. W3C 2011b; Wolfermann 2013; Mozilla Developer Network 2013).