Supportare i dispositivi pieghevoli con l'API Viewport Segments

Alexis Menard

Pubblicato: 9 giugno 2025

L'API Viewport Segments offre l'accesso alla posizione e alle dimensioni di una regione logicamente separata del riquadro visibile con JavaScript o CSS ed è disponibile a partire da Chrome 138.

I segmenti del viewport vengono creati quando il viewport viene suddiviso da una o più funzionalità hardware, ad esempio una piega o una cerniera tra display separati, che fungono da divisore.

I segmenti sono regioni del riquadro visibile che puoi trattare come logicamente distinte durante lo sviluppo del tuo sito o della tua app. Queste entusiasmanti API ti consentono di creare o ottimizzare la tua interfaccia in modo specifico per i dispositivi pieghevoli. Ad esempio, creando un'esperienza utente a doppio riquadro o semplicemente evitando che i contenuti vengano visualizzati in modo non ottimale.

Dalla prova dell'origine che abbiamo eseguito l'anno scorso, sono state apportate due modifiche:

• L'attributo JavaScript segments ora si trova nell'oggetto window.viewport appena aggiunto anziché in window.visualViewport.
• Il comportamento della proprietà segments quando un dispositivo non è piegato è stato allineato al comportamento CSS di questa funzionalità. Quando un dispositivo non è piegato (o non può essere piegarsi), la proprietà segments conterrà un array di un singolo segmento che rappresenta le dimensioni dell'intera area visibile.

Dai un'occhiata alle demo per dispositivi pieghevoli per vedere l'API in azione.