Viewport Segments API
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
Want more browser support for this feature? Tell us why.
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.
Die Viewport Segments API ermöglicht es Entwicklern, mit CSS und JavaScript auf die Position und Abmessungen logisch getrennter Viewport-Segmente zuzugreifen. Viewport-Segmente entstehen, wenn der Viewport durch ein oder mehrere Hardwaremerkmale geteilt wird, etwa durch eine Falte oder ein Scharnier zwischen getrennten Displays. Mit der Viewport Segments API können Entwickler responsive Designs erstellen, die für unterschiedliche Größen und Anordnungen von Viewport-Segmenten optimiert sind.
Konzepte und Verwendung
Geräte mit mehreren Displays, die als verschiedene Segmente einer gemeinsamen Anzeigefläche dienen sollen – etwa Smartphones mit faltbarem Bildschirm oder Scharnier –, stellen Entwickler vor besondere Herausforderungen bei der Gestaltung. Sie können Ihr Layout für die Anzeigefläche als Ganzes optimieren. Doch wie stellen Sie sicher, dass Designelemente auf die verschiedenen Segmente passen und nicht in zwei Teile getrennt werden? Und wie verhindern Sie, dass Inhalte durch die physische Falte oder Verbindungsstelle verdeckt werden?
Es kann wichtig sein zu wissen, ob der Bildschirm eines Benutzergeräts eine Falte oder Verbindungsstelle hat, wie groß die verschiedenen Segmente sind, ob sie gleich groß sind und wie sie angeordnet sind (nebeneinander oder übereinander). Die Viewport Segments API ermöglicht den Zugriff auf Informationen über segmentierte Geräte mit CSS- und JavaScript-Funktionen. Diese geben Aufschluss über die Position und Abmessungen jedes Viewport-Segments innerhalb einer Anzeigefläche. Dazu gehören @media-Features, mit denen sich unterschiedliche horizontale und vertikale Anordnungen erkennen lassen.
Eine Erklärung der Funktionsweise der API finden Sie unter Die Viewport Segments API verwenden.
CSS-Features
horizontal-viewport-segments-@media-Feature-
Erkennt, ob das Gerät eine bestimmte Anzahl horizontal angeordneter Viewport-Segmente hat.
vertical-viewport-segments-@media-Feature-
Erkennt, ob das Gerät eine bestimmte Anzahl vertikal angeordneter Viewport-Segmente hat.
- Umgebungsvariablen für Viewport-Segmente
-
Diese Umgebungsvariablen ermöglichen den Zugriff auf die Kantenkoordinaten und Abmessungen jedes Viewport-Segments.
Schnittstellen
Viewport-
Repräsentiert den Viewport des Geräts. Bietet Zugriff auf die Eigenschaft
Viewport.segments, die ein Array vonDOMRect-Objekten zurückgibt. Diese repräsentieren die Position und Abmessungen jedes Viewport-Segments innerhalb einer segmentierten Anzeigefläche.
Erweiterungen anderer Schnittstellen
Window.viewport-
Gibt eine
Viewport-Objektinstanz zurück, die Informationen über den aktuellen Zustand des Geräte-Viewports bereitstellt.
Beispiele
Ein vollständiges Beispiel für die Verwendung der oben genannten Funktionen finden Sie in der Demo zur Viewport Segments API.
Sehen Sie sich die Demo nach Möglichkeit auf einem faltbaren Gerät an. Aktuelle Entwicklertools für Browser können faltbare Geräte emulieren, bilden aber die verschiedenen physischen Segmente nicht nach.
Spezifikationen
| Spezifikation |
|---|
| CSS Viewport Module Level 1 # dom-viewport-segments |
Browser-Kompatibilität
Siehe auch
- Die Viewport Segments API verwenden
- CSSOM View API
- Device Posture API
- Modul für CSS-Umgebungsvariablen
- Origin Trial für Foldable APIs auf developer.chrome.com (2024)