Ondersteun opvouwbare apparaten met de Viewport Segments API

Alexis Menard

Gepubliceerd: 9 juni 2025

De Viewport Segments API biedt toegang tot de positie en afmetingen van een logisch gescheiden gebied van de viewport met JavaScript of CSS en is beschikbaar in Chrome 138.

Viewportsegmenten worden gemaakt wanneer de viewport wordt gesplitst door een of meer hardwarefuncties, zoals een vouw of een scharnier tussen afzonderlijke beeldschermen, die als scheidingswand fungeren.

Segmenten zijn delen van de viewport die u als logisch onderscheiden kunt beschouwen bij het ontwikkelen van uw site of app. Met deze interessante API's kunt u uw interface specifiek voor opvouwbare apparaten creëren of optimaliseren. Bijvoorbeeld door een gebruikerservaring met twee schermen te creëren of gewoon te voorkomen dat content over de vouw wordt weergegeven.

Ten opzichte van de oorspronkelijke proef die we vorig jaar hebben uitgevoerd , zijn er twee veranderingen:

• De JavaScript- segments bevinden zich nu in het nieuw toegevoegde window.viewport -object in plaats van window.visualViewport .
• Het gedrag van segments wanneer een apparaat niet is opgevouwen, is afgestemd op het CSS-gedrag van deze functie. Wanneer een apparaat niet is opgevouwen (of niet kan worden opgevouwen), bevat de segments een array van één segment dat de volledige viewportgrootte vertegenwoordigt.

Bekijk de demo's van de opvouwbare apparaten om de API in actie te zien!