@viewport

Zusammenfassung

Die @viewport CSS at-Regel enthält eine Menge aus geschachtelten Deskriptoren in einem CSS-Block, der durch geschweifte Klammern begrenzt wird. Diese Deskriptoren steuern die Viewport-Einstellungen, insbesondere auf mobilen Geräten.

Syntax

(Dieser MDN Artikel ist derzeit nur ein Abriss, ihm fehlt die vollständige Beschreibung der Syntax.)

@viewport {
  /* viewport-Deskriptor: viewport-Wert; */ 
}

Ein Zoomfaktor von 1.0 oder 100% beschreibt kein Zooming. Größere Werte vergrößern, kleinere Werte verkleinern.

Deskriptoren

Browser sollen unbekannte Deskriptoren ignorieren.

min-width: Verwendet für die Festlegung der Breite des Viewports, wenn das Dokument zum ersten Mal gezeigt wird.
max-width: Verwendet für die Festlegung der Breite des Viewports, wenn das Dokument zum ersten Mal gezeigt wird.
width: Eine Kurznotation für die Festlegung von sowohl min-width als auch max-width
min-height: Verwendet für die Festlegung der Höhe des Viewports, wenn das Dokument zum ersten Mal gezeigt wird.
max-height: Verwendet für die Festlegung der Höhe des Viewports, wenn das Dokument zum ersten Mal gezeigt wird.
height: Eine Kurznotation für die Festlegung von sowohl min-height als auch max-height
zoom: Legt den initialen Zoomfaktor fest.
min-zoom: Legt den minimalen Zoomfaktor fest.
max-zoom: Legt den maximalen Zoomfaktor fest.
user-zoom: Steuert, ob der Anwender den Zoomfaktor ändern darf.
orientation: Steuert die Orientierung des Dokuments (Hoch- oder Querformat).

Beispiele

@viewport {
  min-width: 640px;
  max-width: 800px;
}
@viewport {
  zoom: 0.75;
  min-zoom: 0.5;
  max-zoom: 0.9;
}
@viewport {
  orientation: landscape;
}

Spezifikationen

Spezification	Status	Kommentar
CSS Device Adaptation Die Definition von '@viewport' in dieser Spezifikation.	Arbeitsentwurf

Browserkompatibilität

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android Webview	Chrome für Android	Firefox für Android	Opera für Android	Safari auf iOS	Samsung Internet
`@viewport`	Chrome Vollständige Unterstützung 29 Hinweise Deaktiviert Vollständige Unterstützung 29 Hinweise Deaktiviert Hinweise See Chromium bug 235457. Deaktiviert From version 29: this feature is behind the `--enable-experimental-webkit-features` runtime flag and the `--enable-viewport` runtime flag.	Edge Vollständige Unterstützung 12 Mit Präfix Deaktiviert Vollständige Unterstützung 12 Mit Präfix Deaktiviert Mit Präfix Benötigt das Herstellerpräfix: -ms- Deaktiviert From version 12: this feature is behind the `Enable @-ms-viewport rules` preference.	Firefox Keine Unterstützung Nein Hinweise Keine Unterstützung Nein Hinweise Hinweise See Firefox bug 747754.	IE Vollständige Unterstützung 10 Mit Präfix Vollständige Unterstützung 10 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -ms-	Opera Vollständige Unterstützung 16 Deaktiviert Vollständige Unterstützung 16 Deaktiviert Deaktiviert From version 16: this feature is behind the `--enable-experimental-webkit-features` runtime flag and the `--enable-viewport` runtime flag. Keine Unterstützung 11.1 — 15 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -o-	Safari Keine Unterstützung Nein Hinweise Keine Unterstützung Nein Hinweise Hinweise See WebKit bug 95959.	WebView Android Vollständige Unterstützung 4.4	Chrome Android Vollständige Unterstützung 29	Firefox Android Keine Unterstützung Nein Hinweise Keine Unterstützung Nein Hinweise Hinweise See Firefox bug 747754.	Opera Android Vollständige Unterstützung 16 Deaktiviert Vollständige Unterstützung 16 Deaktiviert Deaktiviert From version 16: this feature is behind the `--enable-experimental-webkit-features` runtime flag and the `--enable-viewport` runtime flag. Keine Unterstützung 11.1 — 14 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -o-	Safari iOS Keine Unterstützung Nein Hinweise Keine Unterstützung Nein Hinweise Hinweise See WebKit bug 95959.	Samsung Internet Android Vollständige Unterstützung 2.0
`height` descriptor	Chrome Vollständige Unterstützung 29	Edge Vollständige Unterstützung 12 Mit Präfix Vollständige Unterstützung 12 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -ms-	Firefox Keine Unterstützung Nein	IE Vollständige Unterstützung 10 Mit Präfix Vollständige Unterstützung 10 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -ms-	Opera Vollständige Unterstützung 16 Vollständige Unterstützung 16 Keine Unterstützung 11.1 — 15	Safari Keine Unterstützung Nein	WebView Android Vollständige Unterstützung 4.4	Chrome Android Vollständige Unterstützung 29	Firefox Android Keine Unterstützung Nein	Opera Android Vollständige Unterstützung 16 Vollständige Unterstützung 16 Keine Unterstützung 11.1 — 14	Safari iOS Keine Unterstützung Nein	Samsung Internet Android Vollständige Unterstützung 2.0
`max-height` descriptor	Chrome Vollständige Unterstützung 29	Edge Vollständige Unterstützung 12 Mit Präfix Vollständige Unterstützung 12 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -ms-	Firefox Keine Unterstützung Nein	IE Vollständige Unterstützung 10 Mit Präfix Vollständige Unterstützung 10 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -ms-	Opera Vollständige Unterstützung 16 Vollständige Unterstützung 16 Keine Unterstützung 11.1 — 15	Safari Keine Unterstützung Nein	WebView Android Vollständige Unterstützung 4.4	Chrome Android Vollständige Unterstützung 29	Firefox Android Keine Unterstützung Nein	Opera Android Vollständige Unterstützung 16 Vollständige Unterstützung 16 Keine Unterstützung 11.1 — 14	Safari iOS Keine Unterstützung Nein	Samsung Internet Android Vollständige Unterstützung 2.0
`max-width` descriptor	Chrome Vollständige Unterstützung 29	Edge Vollständige Unterstützung 12 Mit Präfix Vollständige Unterstützung 12 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -ms-	Firefox Keine Unterstützung Nein	IE Vollständige Unterstützung 10 Mit Präfix Vollständige Unterstützung 10 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -ms-	Opera Vollständige Unterstützung 16 Vollständige Unterstützung 16 Keine Unterstützung 11.1 — 15	Safari Keine Unterstützung Nein	WebView Android Vollständige Unterstützung 4.4	Chrome Android Vollständige Unterstützung 29	Firefox Android Keine Unterstützung Nein	Opera Android Vollständige Unterstützung 16 Vollständige Unterstützung 16 Keine Unterstützung 11.1 — 14	Safari iOS Keine Unterstützung Nein	Samsung Internet Android Vollständige Unterstützung 2.0
`max-zoom` descriptor	Chrome Vollständige Unterstützung 29	Edge Vollständige Unterstützung 12 Mit Präfix Vollständige Unterstützung 12 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -ms-	Firefox Keine Unterstützung Nein	IE Vollständige Unterstützung 10 Mit Präfix Vollständige Unterstützung 10 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -ms-	Opera Vollständige Unterstützung 16	Safari Keine Unterstützung Nein	WebView Android Vollständige Unterstützung 37	Chrome Android Vollständige Unterstützung 29	Firefox Android Keine Unterstützung Nein	Opera Android ?	Safari iOS Keine Unterstützung Nein	Samsung Internet Android Vollständige Unterstützung 2.0
`min-height` descriptor	Chrome Vollständige Unterstützung 29	Edge Vollständige Unterstützung 12 Mit Präfix Vollständige Unterstützung 12 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -ms-	Firefox Keine Unterstützung Nein	IE Vollständige Unterstützung 10 Mit Präfix Vollständige Unterstützung 10 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -ms-	Opera Vollständige Unterstützung 16 Vollständige Unterstützung 16 Keine Unterstützung 11.1 — 15	Safari Keine Unterstützung Nein	WebView Android Vollständige Unterstützung 4.4	Chrome Android Vollständige Unterstützung 29	Firefox Android Keine Unterstützung Nein	Opera Android Vollständige Unterstützung 16 Vollständige Unterstützung 16 Keine Unterstützung 11.1 — 14	Safari iOS Keine Unterstützung Nein	Samsung Internet Android Vollständige Unterstützung 2.0
`min-width` descriptor	Chrome Vollständige Unterstützung 29	Edge Vollständige Unterstützung 12 Mit Präfix Vollständige Unterstützung 12 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -ms-	Firefox Keine Unterstützung Nein	IE Vollständige Unterstützung 10 Mit Präfix Vollständige Unterstützung 10 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -ms-	Opera Vollständige Unterstützung 16 Vollständige Unterstützung 16 Keine Unterstützung 11.1 — 15	Safari Keine Unterstützung Nein	WebView Android Vollständige Unterstützung 4.4	Chrome Android Vollständige Unterstützung 29	Firefox Android Keine Unterstützung Nein	Opera Android Vollständige Unterstützung 16 Vollständige Unterstützung 16 Keine Unterstützung 11.1 — 14	Safari iOS Keine Unterstützung Nein	Samsung Internet Android Vollständige Unterstützung 2.0
`min-zoom` descriptor	Chrome Vollständige Unterstützung 29	Edge Vollständige Unterstützung 12 Mit Präfix Vollständige Unterstützung 12 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -ms-	Firefox Keine Unterstützung Nein	IE Vollständige Unterstützung 10 Mit Präfix Vollständige Unterstützung 10 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -ms-	Opera Vollständige Unterstützung 16	Safari Keine Unterstützung Nein	WebView Android Vollständige Unterstützung 37	Chrome Android Vollständige Unterstützung 29	Firefox Android Keine Unterstützung Nein	Opera Android ?	Safari iOS Keine Unterstützung Nein	Samsung Internet Android Vollständige Unterstützung 2.0
`orientation` descriptor	Chrome Keine Unterstützung Nein	Edge Vollständige Unterstützung 12 Mit Präfix Vollständige Unterstützung 12 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -ms-	Firefox Keine Unterstützung Nein	IE Vollständige Unterstützung 10 Mit Präfix Vollständige Unterstützung 10 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -ms-	Opera Keine Unterstützung Nein	Safari Keine Unterstützung Nein	WebView Android Keine Unterstützung Nein	Chrome Android Keine Unterstützung Nein	Firefox Android Keine Unterstützung Nein	Opera Android Keine Unterstützung 11.1 — 14 Mit Präfix Keine Unterstützung 11.1 — 14 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -o-	Safari iOS Keine Unterstützung Nein	Samsung Internet Android Keine Unterstützung Nein
`user-zoom` descriptor	Chrome Vollständige Unterstützung 29	Edge Vollständige Unterstützung 12 Mit Präfix Vollständige Unterstützung 12 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -ms-	Firefox Keine Unterstützung Nein	IE Vollständige Unterstützung 10 Mit Präfix Vollständige Unterstützung 10 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -ms-	Opera Vollständige Unterstützung 16	Safari Keine Unterstützung Nein	WebView Android Vollständige Unterstützung 37	Chrome Android Vollständige Unterstützung 29	Firefox Android Keine Unterstützung Nein	Opera Android ?	Safari iOS Keine Unterstützung Nein	Samsung Internet Android Vollständige Unterstützung 2.0
`viewport-fit` descriptor	Chrome Keine Unterstützung Nein	Edge Keine Unterstützung Nein	Firefox Keine Unterstützung Nein	IE Keine Unterstützung Nein	Opera Keine Unterstützung Nein	Safari Keine Unterstützung Nein	WebView Android Keine Unterstützung Nein	Chrome Android Keine Unterstützung Nein	Firefox Android Keine Unterstützung Nein	Opera Android ?	Safari iOS Keine Unterstützung Nein	Samsung Internet Android Keine Unterstützung Nein
`width` descriptor	Chrome Vollständige Unterstützung 29	Edge Vollständige Unterstützung 12 Mit Präfix Vollständige Unterstützung 12 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -ms-	Firefox Keine Unterstützung Nein	IE Vollständige Unterstützung 10 Mit Präfix Vollständige Unterstützung 10 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -ms-	Opera Vollständige Unterstützung 16 Vollständige Unterstützung 16 Keine Unterstützung 11.1 — 15	Safari Keine Unterstützung Nein	WebView Android Vollständige Unterstützung 4.4	Chrome Android Vollständige Unterstützung 29	Firefox Android Keine Unterstützung Nein	Opera Android Vollständige Unterstützung 16 Vollständige Unterstützung 16 Keine Unterstützung 11.1 — 14	Safari iOS Keine Unterstützung Nein	Samsung Internet Android Vollständige Unterstützung 2.0
`zoom` descriptor	Chrome Vollständige Unterstützung 29	Edge Vollständige Unterstützung 12 Mit Präfix Vollständige Unterstützung 12 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -ms-	Firefox Keine Unterstützung Nein	IE Vollständige Unterstützung 10 Mit Präfix Vollständige Unterstützung 10 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -ms-	Opera Vollständige Unterstützung 16	Safari Keine Unterstützung Nein	WebView Android Vollständige Unterstützung 4.4	Chrome Android Vollständige Unterstützung 61	Firefox Android Keine Unterstützung Nein	Opera Android Vollständige Unterstützung 16	Safari iOS Keine Unterstützung Nein	Samsung Internet Android Vollständige Unterstützung 8.0

Legende

Vollständige Unterstützung: Vollständige Unterstützung
Keine Unterstützung: Keine Unterstützung
Kompatibilität unbekannt: Kompatibilität unbekannt
Siehe Implementierungshinweise.: Siehe Implementierungshinweise.
Benutzer muss dieses Feature explizit aktivieren.: Benutzer muss dieses Feature explizit aktivieren.
Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.: Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.

Siehe auch

<meta>, specifically <meta name="viewport">
Using the viewport meta tag to control layout on mobile browsers