@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

Wir konvertieren die Kompatibilitätsdaten in ein maschinenlesbares JSON Format. Diese Kompatibilitätstabelle liegt noch im alten Format vor, denn die darin enthaltenen Daten wurden noch nicht konvertiert. Finde heraus wie du helfen kannst!

Desktop
Mobile

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	29 (behind a flag)	Nicht unterstützt	10 -ms	11.10 Removed in 15 Reintroduced behind a flag in 16	Nicht unterstützt

Feature	Android	Chrome for Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	4.4	29	Nicht unterstützt	10-ms[1]	11.10 Removed in 15 Reintroduced behind a flag in 16	Nicht unterstützt

[1] Es gibt einen Bug im IE Mobile 10 auf älteren Versionen von Windows Phone 8, wo device-width, wenn innerhalb von @-ms-viewport verwendet, als Bildschirmbreite in physikalischen Pixeln statt genormten CSS-Pixeln interpretiert wird, was der Spezifikation widerspricht. Wenn es jedoch in einem viewport <meta> Tag verwendet wird, ist die Berechnung von device-width richtig. Nach Angaben von Microsoft wurde dieser Bug in Windows Phone 8 Update 3 (a.k.a. GDR3) behoben, obwohl berichtet wird, dass das Lumia Black GDR3 Update den Fehler nicht behoben hat (zumindest auf dem Lumia 920). Mehr Details und ein Workaround sind zu finden unter Tim Kadlec's blog post "Windows Phone 8 and Device-Width".

Siehe auch

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