@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

Browserkompatibilität

Siehe auch

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