Compatibilité avec les appareils pliables grâce à l'API Viewport Segments

Alexis Menard

Publié le : 9 juin 2025

L'API Viewport Segments permet d'accéder à la position et aux dimensions d'une région logiquement distincte de la fenêtre d'affichage, soit avec JavaScript, soit avec CSS. Elle est disponible à partir de Chrome 138.

Les segments de fenêtre d'affichage sont créés lorsque la fenêtre d'affichage est divisée par une ou plusieurs fonctionnalités matérielles (comme un pli ou une charnière entre plusieurs écrans) qui agissent comme un séparateur.

Les segments sont des régions de la fenêtre d'affichage que vous pouvez traiter comme logiquement distinctes lorsque vous développez votre site ou votre application. Ces API intéressantes vous permettent de créer ou d'optimiser votre interface spécifiquement pour les appareils pliables. Par exemple, en créant une expérience utilisateur à double volet ou en évitant simplement que le contenu ne s'affiche au-delà de la ligne de flottaison.

Deux modifications ont été apportées depuis l'origin trial que nous avons menée l'année dernière :

• L'attribut JavaScript segments se trouve désormais dans l'objet window.viewport qui vient d'être ajouté, et non plus dans window.visualViewport.
• Le comportement de la propriété segments lorsqu'un appareil n'est pas plié a été aligné sur le comportement CSS de cette fonctionnalité. Lorsqu'un appareil n'est pas plié (ou ne peut pas l'être), la propriété segments contient un tableau d'un seul segment représentant la taille totale de la fenêtre d'affichage.

Consultez les démos pour les appareils pliables pour voir l'API en action.