Viewport Segments API
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
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, die Position und Abmessungen logisch getrennter Viewport-Segmente mittels CSS und JavaScript zu ermitteln. Viewport-Segmente werden erstellt, wenn der Viewport durch eine oder mehrere Hardware-Eigenschaften wie beispielsweise ein Falz oder ein Scharnier zwischen getrennten Anzeigen geteilt wird. 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 Anzeigen, die als unterschiedliche Segmente derselben Anzeigefläche fungieren sollen (denken Sie an klappbare oder klappbare Smartphone-Bildschirme), stellen Entwickler vor einzigartige Designherausforderungen. Sie können Ihr Layout für die Anzeige als eine Einheit optimieren, aber wie können Sie sicherstellen, dass Designelemente genau auf den verschiedenen Segmenten platzieren und nicht in zwei Teile geschnitten werden? Und wie können Sie verhindern, dass Inhalte durch den physischen Falz oder die Verbindung verdeckt werden?
Es kann wichtig sein zu wissen, ob der Bildschirm eines Benutzergeräts einen Falz oder eine Verbindung hat, welche Größe die verschiedenen Segmente haben, ob sie gleich groß sind und wie die Ausrichtung der Segmente ist (ob sie nebeneinander oder übereinander sind). Die Viewport Segments API ermöglicht den Zugriff auf die segmentierten Geräteinformationen des Benutzers mit CSS- und JavaScript-Funktionen, die Zugang zur Position und den Abmessungen jedes Viewport-Segments innerhalb einer Anzeige bieten, einschließlich @media-Funktionen, um unterschiedliche horizontale und vertikale Layouts zu erkennen.
Eine Erklärung, wie die API funktioniert, finden Sie unter Verwendung der Viewport Segments API.
Schnittstellen
Viewport-
Repräsentiert den Viewport des Geräts. Bietet Zugriff auf die
Viewport.segmentsEigenschaft, die ein Array vonDOMRectObjekten zurückgibt, welche die Position und Abmessungen jedes Viewport-Segments innerhalb einer segmentierten Anzeige darstellen.
Erweiterungen zu anderen Schnittstellen
Window.viewport-
Gibt eine
Viewport-Objektinstanz zurück, die Informationen über den aktuellen Zustand des Viewports des Geräts bietet.
CSS-Funktionen
horizontal-viewport-segments@media-Funktion-
Erkennt, ob das Gerät eine bestimmte Anzahl von Viewport-Segmenten horizontal angeordnet hat.
vertical-viewport-segments@media-Funktion-
Erkennt, ob das Gerät eine bestimmte Anzahl von Viewport-Segmenten vertikal angeordnet hat.
- Viewport-Segment-Umgebungsvariablen
-
Diese Umgebungsvariablen bieten Zugang zu den Randkoordinaten und Abmessungen jedes Viewport-Segments.
Beispiele
Ein vollständiges Beispiel zur Nutzung der oben genannten Funktionen finden Sie in der Viewport-Segment-API-Demo.
Wenn möglich, sollten Sie die Demo auf einem faltbaren Gerät ansehen. Aktuelle Browser-Entwicklertools ermöglichen die Emulation faltbarer Geräte, beinhalten jedoch keine Emulation der verschiedenen physischen Segmente.
Spezifikationen
| Specification |
|---|
| CSS Viewport Module Level 1 # dom-viewport-segments |
Browser-Kompatibilität
Loading…
Siehe auch
- Verwendung der Viewport Segments API
- Viewport API
- Device Posture API
- CSS-Umgebungsvariablen Modul
- Origin Trial für Foldable APIs via developer.chrome.com (2024)