HTML Meta-Tag Viewport

Sichtbarer Ausschnitt der Webseite

Sichtbarer Ausschnitt der Webseite

Die Browser der mobilen Geräte gehen davon aus, dass Webseiten nicht für ihre hochauflösenden Monitore ausgelegt sind. Da ihre Auflösung (die Pixel pro Inch) heute fast genauso hoch wie die der Desktop-Monitore sind, würden sie die Webseite z.B. mit 2532 x 1170 Pixeln (460 ppi) anzeigen: Im Hochformat also mit einer Breite von 1170 Pixeln.

Das Meta-Tag für den Viewport oder Anzeigebereich passt die Webseite an die Auflösung der Geräte an und beschreibt den sichtbaren Ausschnitt für die kleinen Monitore der mobilen Geräte – also für Handys und Tablets.

18-12-15 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

meta name="viewport"

Bei der hohen Auflösung der mobilen Geräte vom Handy bis zum Tablet wird die Webseite ohne meta name="viewport" komplett mit der vollen Zahl der Pixel angezeigt.

without HTML viewport meta tag
Links: Darstellung ohne HTML Meta Viewport
Rechts: mit Meta Viewport
<meta name="viewport" content="width=device-width, initial-scale=1">

Werte für Viewport

Üblicherweise setzen wir die Breite des Viewports auf die Breite des Geräts: width=device-width. Diese Einstellung ist geräteunabhängig und kann im Querformat (Landscape) die volle Breite des Geräts nutzen.

width=device-width
legt fest, dass die Breite der Seite gleich der Breite des Fensters des Geräts sein soll.
initial-scale=1
setzt den anfänglichen Zoom bei ersten Laden in den Browser.
user-scalable=yes
yes erlaubt Besuchern, die Seite zu zoomen. Die Einstellung auf "no" würde die Nutzung einschränken.
minimum-scale, maximum-scale
bestimmt einen minimal / maximal erlaubten Zoom. Mit einem maximalen Zoom von 2 könnten Benutzer die Darstellung der Seite vergrößern, um mehr Details in einem Bild zu erkennen.

Das content-Attribut des Meta-Viewport-Elements ist nicht auf einen Wert beschränkt, sondern kann beliebig viele dieser Optionen aufnehmen. Möglich ist also auch:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">

Die Auflösung der Monitore

Desktop-Monitore rastern das Bild und stellen es i.d.R. mit 72 bis 120 Pixeln pro Inch (PPI) dar. Die Retina-Displays der mobilen Geräte vom Handy bis zum Tablett erreichen extreme Auflösungen von 300 Pixeln und mehr pro Inch.

Auflösung Desktop-Monitor vs Retina-Monitor
Links: Auflösung Desktop-Monitor
Rechts: Retina-Monitor

Mit nahezu derselben Zahl an Pixeln könnte das Handy die Webseite im selben Layout anzeigen wie ein Desktop-Monitor – nur eben nicht mehr lesbar. Mit meta name="viewport" content="width=device-width", aber ohne CSS-Breakpoints würde die Seite das Platzangebot des Viewports überschreiten und schwimmen. Erst mit meta name="viewport" und CSS-Breakpoints kommt die Seite den Nutzern lesbar entgegen.

Drei Ansichten: ohne meta viewport, mit viewport, mit viewport und CSS breakpoints