<meta name="viewport">

Ein <meta name="viewport">-Element hat die folgenden zusätzlichen Attribute:

content

Das content-Attribut muss definiert sein und sein Wert legt verschiedene viewportspezifische Verhaltensweisen fest. Akzeptiert einen oder mehrere der folgenden Schlüsselwörter in einer kommagetrennten Liste:

width

Definiert die Pixelbreite des Viewports, den Sie als Darstellungsgröße wünschen. Es kann eine positive Ganzzahl oder das Schlüsselwort device-width sein.

height

Definiert die Höhe des Viewports. Es kann eine positive Ganzzahl oder das Schlüsselwort device-height sein. Dies wird von keinem Browser verwendet.

initial-scale

Definiert das Verhältnis zwischen der Gerätebreite (device-width im Hochformat oder device-height im Querformat) und der Viewport-Größe. Es kann eine Zahl zwischen 0.0 und 10.0 sein.

maximum-scale

Definiert das maximale Zoommaß. Es muss größer oder gleich dem minimum-scale sein, ansonsten ist das Verhalten undefiniert. Browsereinstellungen können diese Regel ignorieren und iOS10+ ignoriert sie standardmäßig. Es kann eine Zahl zwischen 0.0 und 10.0 sein.

minimum-scale

Definiert die minimale Zoomstufe. Es muss kleiner oder gleich dem maximum-scale sein, ansonsten ist das Verhalten undefiniert. Browsereinstellungen können diese Regel ignorieren und iOS10+ ignoriert sie standardmäßig. Es kann eine Zahl zwischen 0.0 und 10.0 sein.

user-scalable

Ein boolescher Wert, der angibt, ob der Benutzer die Webseite zoomen kann. Browsereinstellungen können diese Regel ignorieren, und iOS10+ ignoriert sie standardmäßig. Es kann entweder yes oder no sein, wobei yes der Standardwert ist.

Warnung: Das Deaktivieren der Zoomfähigkeiten durch Setzen des user-scalable-Wertes auf no verhindert, dass Menschen mit Sehbehinderungen den Seiteninhalt lesen und verstehen können.

• MDN Verständnis von WCAG, Erklärung der Richtlinie 1.4
• Verständnis des Erfolgskriteriums 1.4.4 | W3C Verständnis von WCAG 2.0

interactive-widget

Gibt den Effekt an, den interaktive UI-Widgets, wie virtuelle Tastaturen, auf den Viewport einer Seite haben. Es kann das Schlüsselwort resizes-visual, resizes-content oder overlays-content sein.

• resizes-visual: Der visueller Viewport wird durch das interaktive Widget skaliert. Dies ist der Standard.
• resizes-content: Der Viewport wird durch das interaktive Widget skaliert.
• overlays-content: Weder der Viewport noch der visuelle Viewport wird durch das interaktive Widget skaliert.

viewport-fit

Definiert die sichtbaren Teile der Webseite. Es kann eines der Schlüsselwörter auto, contain oder cover sein.

• auto: Beeinflusst nicht den anfänglichen Layout-Viewport, und die gesamte Webseite ist sichtbar.
• contain: Der Viewport wird maßstabsgetreu an das größte innerhalb des Displays eingeschriebene Rechteck angepasst.
• cover: Der Viewport wird skaliert, um das Gerätedisplay auszufüllen. Es wird dringend empfohlen, die Sicherer Bereich-Variablen zu verwenden, um sicherzustellen, dass wichtige Inhalte nicht außerhalb des Displays enden.

Das folgende Beispiel gibt dem Browser an, dass die Seite in der Breite des Geräts dargestellt werden soll:

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

Der folgende content-Wert verwendet mehrere Schlüsselwörter, die dem Browser Hinweise geben, den Vollbildmodus zu nutzen, zusammen mit viewport-fit, das hilft, Displayausschnitte wie Mobile-Gerätekerben zu vermeiden:

<meta
  name="viewport"
  content="width=device-width, initial-scale=1.0, viewport-fit=cover" />

• viewport Glossarbegriff