HTML > Meta-Elemente

Meta Viewport

Das Meta-Tag Viewport ("Anzeigebereich") wurde von Apple eingeführt und ist mittlerweile de facto Standard zu Angabe, wie sich die Seite gemäß des Viewports verhalten soll. Als Viewport versteht man prinzipiell den sichtbaren Teil im Browser (bei einer Breite von 100%.

Ohne Angabe des Viewports gehen die Browser von Smartphones und Tablets davon aus, dass die Seite mit einem fixen Layout ausgeliefert wird und verkleinern die Seite (Zoom), so dass eine nicht angepasste Seite vgl. klein (Schriften / Buttons Bilder) dargestellt wird (und der Benutzer den gewünschten Teil manuell vergrößern muss).

Das ist prinzipiell keine schlechte Idee - handelt es sich bei der Seite aber um eine - dem Viewport - angepasste Seite (z. B. eine mit Responsive Web Design (RWD) entwickelte Seite), dann stellt die Seite ja selbst sicher, dass sie bei jeder Viewport-Größe gut dargestellt wird - in diesem Fall wäre ein Zoom nicht so gut, weil dann weiterhin die verkleinerte "Desktop"-Variante angezeigt werden würde.

Dies kann man mit <meta name="viewport" content="width=device-width, initial-scale=1.0" /> einstellen. In diesem Fall wird die Seite entsprechend so dargestellt, wie diese auch geliefert wurde (ohne automatischen Zoom). Bei einer nicht angepassten Webseite würde man dadurch nur einen kleinen Ausschnitt der Seite sehen und muss dann horizontal und vertikal scrollen.

Optionen:

• initial-scale: Mit diesem Wert legt man den anfänglichen Zoomgrad fest. Der Wert 1.0 führt dazu, dass die Inhalte 1:1 dargestellt werden, d. h. eine Graphik mit 320px wird auch (ohne Zoom) als eine 320px Graphik angezeigt - unabhängig wie breit der Viewport ist (also sowohl bei 320px Breite, als auch bei 980px Breite). Der Wert 2.0 würde entsprechend automatisch zu einer anfänglichen 2x-fachen Vergrößerung führen.
• minimum-scale und maximum-scale: Mit dieser Angabe lässt bestimmen wie weit er User raus- bzw. rein-zoomen kann. Zum Beispiel bedeutet der Wert 2.0, dass der User maximal 2x-fach vergrößern kann und 0.5 entsprechend, dass er maximal um 50% verkleinern kann.
• user-scalable: Mit dieser Einstellung kann man festelegen, ob der Benutzer diese Seite überhaupt zoomen (yes) kann oder nicht. "yes" ist der Standard.