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 afgescheiden deel van de viewport, zowel met JavaScript als met CSS, en is beschikbaar vanaf Chrome 138.

Viewportsegmenten ontstaan ​​wanneer de viewport wordt opgesplitst door een of meer hardware-elementen, zoals een vouw of een scharnier tussen afzonderlijke schermen, die als scheidingswand fungeren.

Segmenten zijn gebieden binnen het scherm die je als logisch onderscheiden kunt beschouwen bij het ontwikkelen van je website of app. Deze handige API's stellen je in staat om je interface specifiek voor opvouwbare apparaten te creëren of te optimaliseren. Je kunt bijvoorbeeld een gebruikerservaring met twee vensters creëren, of voorkomen dat content over de hele vouw wordt weergegeven.

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

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

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