<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 viewport-bezogene Verhaltensweisen fest. Akzeptiert eines oder mehrere der folgenden Schlüsselwörter in einer kommagetrennten Liste:

width

Definiert die Pixelbreite des Viewports, die Sie für das Rendern der Website wünschen. Es kann eine positive ganze Zahl oder das Schlüsselwort device-width sein.

height

Definiert die Höhe des Viewports. Es kann eine positive ganze Zahl 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 den maximalen Zoom-Faktor. Er muss größer oder gleich dem minimum-scale sein, andernfalls 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 den minimalen Zoomlevel. Er muss kleiner oder gleich dem maximum-scale sein, andernfalls 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 Zoom-Funktionalität durch Setzen von user-scalable auf no verhindert, dass Personen mit Sehschwäche die Seiteninhalte lesen und verstehen können.

• MDN Understanding WCAG, Leitfaden 1.4 Erklärungen
• Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0

viewport-fit

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

• auto: Beeinflusst das anfängliche Layout-Viewport nicht und die gesamte Webseite ist sichtbar.
• contain: Der Viewport wird skaliert, um das größte rechteckige Fenster im Display zu maximieren.
• cover: Der Viewport wird skaliert, um das Geräte-Display auszufüllen. Es wird dringend empfohlen, die Safe Area Inset-Variablen zu verwenden, um sicherzustellen, dass wichtige Inhalte nicht außerhalb des Displays erscheinen.

Das folgende Beispiel zeigt dem Browser an, dass die Seite in der Gerätebreite gerendert werden soll:

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

Der folgende content-Wert verwendet mehrere Schlüsselwörter, die dem Browser den Hinweis geben, den Vollbildmodus zu verwenden, zusammen mit viewport-fit, um Anzeigeausschnitte wie Kerben von Mobilgeräten zu vermeiden:

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

• viewport Glossarbegriff