Unterstützung für faltbare Geräte mit der Viewport Segments API

Alexis Menard

Veröffentlicht am 9. Juni 2025

Die Viewport Segments API bietet Zugriff auf die Position und Abmessungen eines logisch separaten Bereichs des Viewports entweder mit JavaScript oder CSS und ist ab Chrome 138 verfügbar.

Viewport-Segmente werden erstellt, wenn der Viewport durch ein oder mehrere Hardwarefunktionen unterteilt wird, z. B. durch eine Faltung oder ein Scharnier zwischen separaten Displays, die als Trennlinie fungieren.

Segmente sind Bereiche des Viewports, die Sie bei der Entwicklung Ihrer Website oder App als logisch getrennt behandeln können. Mit diesen APIs können Sie Ihre Benutzeroberfläche speziell für faltbare Geräte erstellen oder optimieren. So können Sie beispielsweise eine Benutzeroberfläche mit zwei Bereichen erstellen oder einfach vermeiden, dass Inhalte über dem Falz platziert werden.

Seit dem Ursprungstest, den wir letztes Jahr durchgeführt haben, gab es zwei Änderungen:

• Das JavaScript-Attribut segments befindet sich jetzt im neu hinzugefügten Objekt window.viewport anstelle von window.visualViewport.
• Das Verhalten der segments-Property, wenn ein Gerät nicht zusammengeklappt ist, wurde an das CSS-Verhalten dieser Funktion angepasst. Wenn ein Gerät nicht gefaltet ist (oder nicht gefaltet werden kann), enthält die Eigenschaft segments ein Array mit einem einzelnen Segment, das die gesamte Viewport-Größe darstellt.

In den Demos für faltbare Geräte können Sie sich die API in Aktion ansehen.