<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. Es akzeptiert eines oder mehrere der folgenden Schlüsselwörter in einer kommagetrennten Liste:

width

Definiert die Pixelbreite des Viewports, bei der Sie möchten, dass die Website gerendert wird. 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 Zoomgrad. Es muss größer oder gleich der 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 das minimale Zoomniveau. Es muss kleiner oder gleich der 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 Zoomfähigkeiten, indem user-scalable auf den Wert no gesetzt wird, verhindert, dass Personen mit Sehschwäche die Seiteninhalte lesen und verstehen können.

• MDN Verständnis von WCAG, Richtlinie 1.4 Erklärungen
• Erklärung des Erfolgskriteriums 1.4.4 | W3C Verständnis von 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 nicht das anfängliche Layout des Viewports, und die gesamte Webseite ist sichtbar.
• contain: Der Viewport wird so skaliert, dass er das größte innerhalb des Displays eingeschriebene Rechteck passt.
• cover: Der Viewport wird skaliert, um das Gerätedisplay auszufüllen. Es wird dringend empfohlen, die Safe Area Inset-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 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 Anzeigebeschnitte wie Einkerbungen auf mobilen Geräten zu vermeiden:

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

• viewport Glossarbegriff