| [ Web Proxy ] |
| Viewing: https://developer.mozilla.org/de/docs/Web/API/Viewport_segments_API | [Back] [Original] |
Get to know MDN better
Dieser Inhalt wurde automatisch aus dem Englischen bersetzt, und kann Fehler enthalten. Erfahre mehr ber dieses Experiment.
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
berprfen Sie die Browser-Kompatibilittstabelle sorgfltig vor der Verwendung auf produktiven Webseiten.
Die Viewport Segments API ermglicht es Entwicklern, die Position und Abmessungen logisch getrennter Viewport-Segmente mithilfe von CSS und JavaScript zu erfassen. Viewport-Segmente entstehen, wenn der Viewport durch eine oder mehrere Hardware-Eigenschaften wie ein Falz oder ein Scharnier zwischen separaten Displays unterteilt wird. Mit der Viewport Segments API knnen Entwickler responsive Designs erstellen, die fr verschiedene Gren und Anordnungen von Viewport-Segmenten optimiert sind.
Gerte mit mehreren Displays, die als verschiedene Segmente derselben Displayflche fungieren sollen (denken Sie an faltbare oder klappbare Smartphones), stellen Entwickler vor einige einzigartige Designherausforderungen. Sie knnen Ihr Layout fr das Display als eine Einheit optimieren, aber wie knnen Sie sicherstellen, dass Designelemente genau auf die verschiedenen Segmente passen und nicht in zwei Teile zerschnitten werden? Und wie knnen Sie verhindern, dass Inhalte durch den physischen Falz/Scharnier verdeckt werden?
Es kann wichtig sein zu wissen, ob der Bildschirm eines Benutzergertes einen Falz oder eine Verbindung hat, welche Gre die verschiedenen Segmente haben, ob sie gleich gro sind und die Ausrichtung der Segmente (ob sie nebeneinander oder bereinander angeordnet sind). Die Viewport Segments API ermglicht den Zugriff auf die segmentierten Gerteinformationen des Benutzers mit CSS und JavaScript-Funktionen, die den Zugriff auf die Position und die Abmessungen jedes Viewport-Segments innerhalb eines Displays ermglichen, einschlielich @media-Funktionen zur Erkennung unterschiedlicher horizontaler und vertikaler Bereichslayouts.
Eine Erklrung, wie die API funktioniert, finden Sie unter Verwendung der Viewport Segments API.
ViewportReprsentiert den Viewport des Gerts. Bietet Zugriff auf die Viewport.segments-Eigenschaft, die ein Array von DOMRect-Objekten zurckgibt, die die Position und Dimensionen jedes Viewport-Segments innerhalb eines segmentierten Displays darstellen.
Window.viewportGibt eine Viewport-Objektinstanz zurck, die Informationen ber den aktuellen Zustand des Viewports des Gerts bietet.
horizontal-viewport-segments @media-FunktionErkennt, ob das Gert ber eine bestimmte Anzahl von Viewport-Segmenten verfgt, die horizontal angeordnet sind.
vertical-viewport-segments @media-FunktionErkennt, ob das Gert ber eine bestimmte Anzahl von Viewport-Segmenten verfgt, die vertikal angeordnet sind.
Diese Umgebungsvariablen bieten Zugriff auf die Randkoordinaten und Dimensionen jedes Viewport-Segments.
Ein vollstndiges Beispiel, das die Verwendung der oben genannten Funktionen demonstriert, finden Sie in der Viewport-Segment-API-Demo.
Wenn mglich, sollten Sie die Demo auf einem faltbaren Gert ansehen. Aktuelle Browser-Entwicklertools ermglichen die Simulation faltbarer Gerte, jedoch wird die Emulation der verschiedenen physischen Segmente nicht untersttzt.
| Spezifikation |
|---|
| CSS Viewport Module Level 1 # dom-viewport-segments |
Der Bauplan fr ein besseres Internet.
Teile dieses Inhalts sind 19982026 von einzelnen mozilla.org-Mitwirkenden. Inhalte sind verfgbar unter einer Creative-Commons-Lizenz.
| Web Proxy Viewer | New URL | Original Page |