Viewport-Meta-Tag

Der Viewport des Browsers ist der Bereich des Fensters, in dem Webinhalte sichtbar sind. Dieser ist oft nicht gleich groß wie die gerenderte Seite, in diesem Fall stellt der Browser Scrollleisten bereit, damit der Benutzer durch die Inhalte navigieren kann.

Einige mobile Geräte und andere schmale Bildschirme rendern Seiten in einem virtuellen Fenster oder Viewport, der in der Regel breiter als der Bildschirm ist, und verkleinern dann das gerenderte Ergebnis, damit alles auf einmal sichtbar ist. Benutzer können dann heranzoomen und den Inhalt genauer ansehen. Zum Beispiel, wenn ein mobiler Bildschirm eine Breite von 640px hat, könnten Seiten mit einem virtuellen Viewport von 980px gerendert werden, und dann wird es verkleinert, um in den 640px-Bereich zu passen.

Dies wird gemacht, weil nicht alle Seiten für mobile Geräte optimiert sind und brechen (oder zumindest schlecht aussehen), wenn sie bei einer kleinen Viewport-Breite gerendert werden. Dieser virtuelle Viewport ist eine Möglichkeit, nicht für Mobilgeräte optimierte Seiten allgemein auf schmalen Bildschirmen besser aussehen zu lassen.

Dieses Verfahren ist jedoch nicht so gut für Seiten, die für schmale Bildschirme mit Media Queries optimiert sind — Wenn der virtuelle Viewport beispielsweise 980px beträgt, werden Media Queries, die bei 640px oder 480px oder weniger greifen, nie verwendet, was die Effektivität solcher responsiven Designtechniken einschränkt. Das Viewport-<meta>-Element mindert dieses Problem des virtuellen Viewports auf Geräten mit schmalen Bildschirmen.

Der Viewport ist eine durch Kommas getrennte Liste von Funktions- und Wertpaaren. Eine typisch mobil optimierte Seite enthält etwa Folgendes:

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

Nicht alle Geräte haben die gleiche Breite; Sie sollten sicherstellen, dass Ihre Seiten gut für eine große Bandbreite von Bildschirmgrößen und -orientierungen funktionieren.

Die grundlegenden Attribute des "viewport"-<meta>-Elements umfassen:

width

Steuert die (Mindest-)Größe des Viewports (siehe Viewport-Breite und Bildschirmbreite). Es kann auf eine bestimmte Anzahl von Pixeln wie width=600 oder auf den speziellen Wert device-width gesetzt werden, was die physische Größe des Geräts in CSS-Pixeln darstellt. Dieser Wert bestimmt den Wert der vw-Einheit. Minimum: 1. Maximum: 10000. Negative Werte: ignoriert.

height

Steuert die (Mindest-)Größe des Viewports (siehe Viewport-Breite und Bildschirmbreite). Es kann auf eine bestimmte Anzahl von Pixeln wie height=400 oder auf den speziellen Wert device-height gesetzt werden, was die physische Größe des Geräts in CSS-Pixeln darstellt. Dieser Wert bestimmt den Wert der vh-Einheit. Minimum: 1. Maximum: 10000. Negative Werte: ignoriert.

initial-scale

Steuert die Zoomstufe, wenn die Seite zum ersten Mal geladen wird. Minimum: 0.1. Maximum: 10. Standard: 1. Negative Werte: ignoriert.

minimum-scale

Steuert, wie weit herausgezoomt auf der Seite erlaubt ist. Minimum: 0.1. Maximum: 10. Standard: 0.1. Negative Werte: ignoriert.

maximum-scale

Steuert, wie weit hineingezoomt auf der Seite erlaubt ist. Jeder Wert unter 3 scheitert an Barrierefreiheit. Minimum: 0.1. Maximum: 10. Standard: 10. Negative Werte: ignoriert.

user-scalable

Steuert, ob Aktionen zum Ein- und Auszoomen auf der Seite erlaubt sind. Gültige Werte: 0, 1, yes, oder no. Standard: 1, was dem Wert yes entspricht. Den Wert 0 zu setzen, was dem Wert no entspricht, verstößt gegen die Web Content Accessibility Guidelines (WCAG).

interactive-widget

Gibt den Effekt an, den interaktive UI-Widgets, wie z. B. eine virtuelle Tastatur, auf die Viewports der Seite haben. Gültige Werte: resizes-visual, resizes-content, oder overlays-content. Standard: resizes-visual.

Die Bildschirmauflösung ist mittlerweile so hoch, dass einzelne Pixel mit dem menschlichen Auge nicht mehr unterscheidbar sind. Smartphones haben oft kleine Bildschirme mit Auflösungen von über 1920–1080 Pixeln (≈400dpi). Aus diesem Grund können viele Browser ihre Seiten in einer kleineren physischen Größe anzeigen, indem sie mehrere Hardware-Pixel für jedes CSS-"Pixel" übersetzen. Anfangs verursachte dies Probleme mit der Benutzerfreundlichkeit und Lesbarkeit auf vielen touch-optimierten Websites.

Auf Bildschirmen mit hoher dpi werden Seiten mit initial-scale=1 von Browsern effektiv vergrößert. Der Text ist glatt und scharf, aber ihre Bitmap-Bilder nutzen möglicherweise nicht die volle Bildschirmauflösung aus. Um schärfere Bilder auf diesen Bildschirmen zu erhalten, möchten Webentwickler möglicherweise Bilder – oder ganze Layouts – in einer höheren Skalierung als ihre endgültige Größe entwerfen und sie dann mit CSS oder Viewport-Eigenschaften verkleinern.

Das Standard-Display-Verhältnis hängt von der Bildschirmdichte ab. Bei einem Display mit einer Dichte von weniger als 200dpi beträgt das Verhältnis 1,0. Bei Displays mit Dichte zwischen 200 und 300dpi beträgt das Verhältnis 1,5. Für Displays mit einer Dichte von über 300dpi beträgt das Verhältnis das nächste kleinere Ganzzahlverhältnis (Dichte/150dpi). Beachten Sie, dass das Standard-Verhältnis nur dann zutrifft, wenn die Viewport-Skalierung gleich 1 ist. Ansonsten hängt die Beziehung zwischen CSS-Pixeln und Geräte-Pixeln vom aktuellen Zoomlevel ab.

Websites können ihren Viewport auf eine bestimmte Größe setzen. Zum Beispiel kann die Definition "width=320, initial-scale=1" verwendet werden, um genau auf ein kleines Telefondisplay im Hochformat zu passen. Dies kann Probleme verursachen, wenn der Browser eine Seite in größerer Größe rendert. Um dies zu beheben, werden Browser die Viewport-Breite bei Bedarf erweitern, um den Bildschirm bei der gewünschten Skala zu füllen. Dies ist besonders nützlich auf Geräten mit großem Bildschirm.

Für Seiten, die eine anfängliche oder maximale Skala festlegen, bedeutet dies, dass die width-Eigenschaft tatsächlich in eine _Mindest-_Viewport-Breite übersetzt. Zum Beispiel, wenn Ihr Layout mindestens 500 Pixel Breite benötigt, können Sie das folgende Markup verwenden. Wenn der Bildschirm mehr als 500 Pixel breit ist, wird der Browser den Viewport erweitern (anstatt heranzuzoomen), um den Bildschirm auszufüllen:

<meta name="viewport" content="width=500, initial-scale=1" />

Andere Attribute, die verfügbar sind, sind minimum-scale, maximum-scale und user-scalable. Diese Eigenschaften beeinflussen die anfängliche Skalierung und Breite sowie die Begrenzung der Zoom-Ebene-Änderungen.

Interaktive UI-Widgets des Browsers können die Größe der Viewports der Seite beeinflussen. Das häufigste solcher UI-Widgets ist eine virtuelle Tastatur. Um zu steuern, welches Resize-Verhalten der Browser verwenden soll, setzen Sie die Eigenschaft interactive-widget.

Erlaubte Werte sind:

resizes-visual

Der visuelle Viewport wird durch das interaktive Widget verändert.

resizes-content

Der Viewport wird durch das interaktive Widget verändert.

overlays-content

Weder der Viewport noch der visuelle Viewport werden durch das interaktive Widget verändert.

<meta name="viewport" content="interactive-widget=resizes-content" />

Wenn der Viewport geändert wird, wird auch der anfängliche umschließende Block geändert, was die berechnete Größe von Viewport-Einheiten beeinflusst.

Wenn Sie wissen möchten, welche mobilen und Tablet-Geräte welche Viewport-Breiten haben, gibt es eine umfassende Liste von Viewport-Größen für Mobil- und Tablet-Geräte hier. Diese gibt Informationen wie Viewport-Breite im Hoch- und Querformat sowie physische Bildschirmgröße, Betriebssystem und die Pixeldichte des Geräts.

• Artikel: Bereiten Sie sich auf Änderungen des Viewport-Resize-Verhaltens im Chrome-Browser auf Android vor