Diese Übersetzung ist unvollständig. Bitte helfen Sie, diesen Artikel aus dem Englischen zu übersetzen.

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
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidEdge MobileFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
@viewportChrome 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.4Chrome Android Vollständige Unterstützung 29Edge Mobile 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 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 Ja
height descriptorChrome Vollständige Unterstützung 29Edge 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 NeinIE 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 NeinWebView Android Vollständige Unterstützung 4.4Chrome Android Vollständige Unterstützung 29Edge Mobile 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 Android Keine Unterstützung NeinOpera Android Vollständige Unterstützung 16
Vollständige Unterstützung 16
Keine Unterstützung 11.1 — 14
Safari iOS Keine Unterstützung NeinSamsung Internet Android Vollständige Unterstützung Ja
max-height descriptorChrome Vollständige Unterstützung 29Edge 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 NeinIE 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 NeinWebView Android Vollständige Unterstützung 4.4Chrome Android Vollständige Unterstützung 29Edge Mobile 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 Android Keine Unterstützung NeinOpera Android Vollständige Unterstützung 16
Vollständige Unterstützung 16
Keine Unterstützung 11.1 — 14
Safari iOS Keine Unterstützung NeinSamsung Internet Android Vollständige Unterstützung Ja
max-width descriptorChrome Vollständige Unterstützung 29Edge 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 NeinIE 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 NeinWebView Android Vollständige Unterstützung 4.4Chrome Android Vollständige Unterstützung 29Edge Mobile 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 Android Keine Unterstützung NeinOpera Android Vollständige Unterstützung 16
Vollständige Unterstützung 16
Keine Unterstützung 11.1 — 14
Safari iOS Keine Unterstützung NeinSamsung Internet Android Vollständige Unterstützung Ja
max-zoom descriptorChrome Vollständige Unterstützung 29Edge 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 NeinIE 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 16Safari Keine Unterstützung NeinWebView Android Vollständige Unterstützung 37Chrome Android Vollständige Unterstützung 29Edge Mobile 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 Android Keine Unterstützung NeinOpera Android ? Safari iOS Keine Unterstützung NeinSamsung Internet Android ?
min-height descriptorChrome Vollständige Unterstützung 29Edge 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 NeinIE 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 NeinWebView Android Vollständige Unterstützung 4.4Chrome Android Vollständige Unterstützung 29Edge Mobile 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 Android Keine Unterstützung NeinOpera Android Vollständige Unterstützung 16
Vollständige Unterstützung 16
Keine Unterstützung 11.1 — 14
Safari iOS Keine Unterstützung NeinSamsung Internet Android Vollständige Unterstützung Ja
min-width descriptorChrome Vollständige Unterstützung 29Edge 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 NeinIE 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 NeinWebView Android Vollständige Unterstützung 4.4Chrome Android Vollständige Unterstützung 29Edge Mobile 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 Android Keine Unterstützung NeinOpera Android Vollständige Unterstützung 16
Vollständige Unterstützung 16
Keine Unterstützung 11.1 — 14
Safari iOS Keine Unterstützung NeinSamsung Internet Android Vollständige Unterstützung Ja
min-zoom descriptorChrome Vollständige Unterstützung 29Edge 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 NeinIE 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 16Safari Keine Unterstützung NeinWebView Android Vollständige Unterstützung 37Chrome Android Vollständige Unterstützung 29Edge Mobile 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 Android Keine Unterstützung NeinOpera Android ? Safari iOS Keine Unterstützung NeinSamsung Internet Android ?
orientation descriptor
Experimentell
Chrome Keine Unterstützung NeinEdge 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 NeinIE 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 NeinSafari Keine Unterstützung NeinWebView Android Keine Unterstützung NeinChrome Android Keine Unterstützung NeinEdge Mobile 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 Android Keine Unterstützung NeinOpera Android Keine Unterstützung 11 — 14
Mit Präfix
Keine Unterstützung 11 — 14
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -o-
Safari iOS Keine Unterstützung NeinSamsung Internet Android Keine Unterstützung Nein
user-zoom descriptorChrome Vollständige Unterstützung 29Edge 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 NeinIE 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 16Safari Keine Unterstützung NeinWebView Android Vollständige Unterstützung 37Chrome Android Vollständige Unterstützung 29Edge Mobile 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 Android Keine Unterstützung NeinOpera Android ? Safari iOS Keine Unterstützung NeinSamsung Internet Android ?
viewport-fit descriptor
Experimentell
Chrome Keine Unterstützung NeinEdge Keine Unterstützung NeinFirefox Keine Unterstützung NeinIE Keine Unterstützung NeinOpera Keine Unterstützung NeinSafari Keine Unterstützung NeinWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Keine Unterstützung NeinOpera Android ? Safari iOS Keine Unterstützung NeinSamsung Internet Android ?
width descriptorChrome Vollständige Unterstützung 29Edge 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 NeinIE 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 NeinWebView Android Vollständige Unterstützung 4.4Chrome Android Vollständige Unterstützung 29Edge Mobile 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 Android Keine Unterstützung NeinOpera Android Vollständige Unterstützung 16
Vollständige Unterstützung 16
Keine Unterstützung 11.1 — 14
Safari iOS Keine Unterstützung NeinSamsung Internet Android Vollständige Unterstützung Ja
zoom descriptorChrome Vollständige Unterstützung 29Edge 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 NeinIE 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 16Safari Keine Unterstützung NeinWebView Android Vollständige Unterstützung 4.4Chrome Android Vollständige Unterstützung 61Edge Mobile 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 Android Keine Unterstützung NeinOpera Android Vollständige Unterstützung 16Safari iOS Keine Unterstützung NeinSamsung Internet Android Keine Unterstützung Nein

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung
Kompatibilität unbekannt  
Kompatibilität unbekannt
Experimentell. Das Verhalten kann sich zukünftig ändern.
Experimentell. Das Verhalten kann sich zukünftig ändern.
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

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: mdnwebdocs-bot, SJW, ExE-Boss, stefankahlau, fscholz, holgerjakobs
Zuletzt aktualisiert von: mdnwebdocs-bot,