Eine normale Desktop Version einer Website wird auf einem Smartphone so skaliert, dass sie in der Breite komplett sichtbar ist. Damit sieht der Besucher die komplette Website und kann in die Website hinein zoomen. Die Website kann bis zu viermal so groß wie normal gezoomt werden. Das Vorgehen ist genial, um normale Desktop Websites auf dem Smartphone zu betrachten. Dabei wird auch noch ein virtueller Anzeigebereich verwendet, der der Website eine höhere Auflösung simuliert. Allerdings möchte man manchmal dieses Verhalten steuern und zum Beispiel die Skalierung bei einer speziellen mobilen Version einer Website ganz deaktivieren. Und das geschieht über die Parameter des “viewport” Meta-Tag.

<meta name="viewport" content="[Parameter]">

Ursprünglich wurde es von Apple mit dem mobilen Safari eingeführt, wird allerdings mittlerweile von vielen anderen mobilen Web-Browsern auch unterstützt. Die nachfolgende Parameter können gesetzt werden:

width

Bestimmt die Breite des virtuellen Anzeigebereichs, wobei der Standardwert 980 Pixel beträgt. Es kann entweder ein Wert zwischen 200 und 10.000 Pixel oder die Konstante “device-width” angegeben werden.

<meta name="viewport" content="width=800">
<meta name="viewport" content="width=device-width">

height

Bestimmt die Höhe des Anzeigebereichs, wobei der Standardwert aus dem Verhältnis zur Breite berechnet wird. Es kann entweder ein Wert zwischen 223 und 10.000 Pixel oder die Konstante “device-height” angegeben werden.

<meta name="viewport" content="height=600">
<meta name="viewport" content="height=device-height">

initial-scale

Bestimmt die Skalierung beim Aufruf einer Website. Der Standardwert wird aus der tatsächlichen Breite berechnet, so dass die Website komplett angezeigt wird. Der mögliche Bereich wird von den beiden Parametern minimum-scale und maximum-scale bestimmt.

<meta name="viewport" content="initial-scale=2">

minimum-scale

Bestimmt die kleinste Skalierungstufe. Der Standardwert beträgt 0.25 und kann von 0 bis 10 angegeben werden.

<meta name="viewport" content="minimum-scale=1">

maximum-scale

Bestimmt die größte Skalierungstufe. Der Standardwert beträgt 5 und kann von 0 bis 10 angegeben werden.

<meta name="viewport" content="maximum-scale=2">

user-scalable

Bestimmt, ob eine Website skaliert wird oder nicht. Der Standradwert ist yes.

<meta name="viewport" content="user-scalable=no">

Und hier noch ein paar Beispiele:

Eine Website, die nicht skaliert werden soll:

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

Eine Website, die für die Breite von 1024 Pixel optimiert worden ist:

<meta name="viewport" content="width=1024">

Eine Website, die in ihrer realen Größe dargestellt werden soll:

<meta name="viewport" content="initial-scale=1">

In der Dokumentation von Apple wird der ”viewport” Meta-Tag und noch weitere Apple-eigene Meta-Tag Konstrukte ausführlich erklärt. Im WordPress Video-Tutorial von Elmatudio ging es ebenfalls um den Viewport Meta-Tag und ebenso hat sich Patrick H. Lauke im Webkrauts Blog mit dem Thema ausführlich beschäftigt. Auf t3n wurden übrigens erst kürzlich 8 Tools vorgestellt, um mobile Websites zu testen.