META-Angaben für den Viewport von Websites

Wenn man mit einem Smartphone oder einem Tablet eine Website besucht, dann wird zunächst davon ausgegangen, dass die Website für eine große Auflösung (um 1000 Pixel breit) erstellt wurde. Das Gerät geht beispielsweise von einer Breite von 980 Pixel aus und stellt die gesamte Website auf dem kleinen Display des Smartphones dar. Dementsprechend wird die Website herunter skaliert. Das bedeutet, dass eine 980 Pixel breite Seite soweit verkleinert wird, dass sie z.B. auf einem 320 Pixel breiten Display passt. Dadurch wird meistens die Schrift ziemlich klein dargestellt und die Texte sind kaum zu lesen. Möchte der User eine leserliche Schriftgröße bzw. eine größere Ansicht, kann das durch Zoomen erreicht werden.

Darstellung ohne META-Angabe für Viewport
Darstellung mit Viewport-Angabe

Skalierung bei responsive Webdesign

Ist eine Website mittels responsive Design für mobile Geräte optimiert, so muss man dafür sorgen, dass nicht von hohen Auflösungen ausgegangen und die Website auf den Geräten nicht skaliert wird. Schließlich ist das mit responsive Designs nicht mehr notwendig. Die Skalierung wird über die META-Angabe "viewport" beeinflusst. Beispielcodes für (X)HTML.

<!-- Für HTML -->
<meta name="viewport" content="width=device-width,initial-scale=1">

<!-- Für XHTML -->
<meta name="viewport" content="width=device-width,initial-scale=1" />

Mit initial-scale=1 wird im Grunde mitgeteilt, dass die Website beim Aufruf zunächst nicht skaliert werden soll. Mit width=device-width wird angegeben, dass die Breite an die des Geräts orientiert werden soll.

Um eine Website gleich zu Beginn verkleinert oder vergrößert darzustellen, könnte man bei initial-scale einen Wert unter 1 (verkleinern) oder über 1 (vergrößern) nehmen, z.B. 0.5 zum Verkleinern (Punkt als Dezimaltrennzeichen verwenden).

Statt width=device-width könnte man auch einen festen Wert vorgeben, z.B. width=320. Das ist jedoch nur sinnvoll, wenn die Website nur für eine Breite von 320 Pixel optimiert wurde. Beispielcodes für (X)HTML.

<!-- Für HTML -->
<meta name="viewport" content="width=320,initial-scale=0.5">

<!-- Für XHTML -->
<meta name="viewport" content="width=320,initial-scale=0.5" />

Kommagetrennt kann die META-Angabe mit einigen weiteren Angaben erweitert werden. z.B.:

  • user-scalable=no: Damit wird der Zoom ausgeschaltet.
  • minimum-scale=x.x: Eine Untergrenze für den Zoom. (Zahl statt x.x eingeben)
  • maximum-scale=x.x: Obergrenze für den Zoom. (Zahl statt x.x eingeben)

Diese Einstellungen sind jedoch in der Regel nicht zu empfehlen, da dem User überlassen werden sollte, ob und wie die Seite gezoomt wird.

Viewport-Angabe in CSS

Die Viewport-Angabe kann auch über CSS erfolgen. Allerdings unterstützen das nicht alle bzw. ältere Browser. Zumindest bis die Browser veraltet und kaum benutzt werden, die das nicht unterstützen, sollte man den Viewport über den META-Tag angeben. Beispiel CSS-Code.

@viewport {
width: device-width;
zoom: 1;
}

Zu beachten ist hierbei die Schreibweise für CSS, z.B. die Angabe der Werte mit Doppelpunkt statt mit Gleichheitszeichen. Außerdem wird die initiale Skalierung mit zoom:...; angegeben. Analog dazu wird statt user-scalable, minimum-scale oder maximum-scale folgender CSS-Code verwendet. Beispiele.

@viewport {
user-zoom: fixed; /* statt user-scalable=no */
min-zoom: 0.5; /* statt minimum-scale=0.5 */
max-zoom: 2; /* statt maximum-scale=2 */
}

Auf jeden Fall sollte immer auch auf realen Smartphones geprüft werden, wie die Seite aussieht.