v138 · device

Viewport Segments Enumeration API

The Viewport Segments API allows developers to adapt their website/webapp layout to target foldable devices. The viewport segments defines the position and dimensions of a logically separate region of the viewport. Viewport segments are created when the viewport is split by one or more hardware features (such as a fold or a hinge between separate displays) t

concepts

  1. Viewport Segments

    Foldable / dual-screen devices expose their physical viewport segments. Sites can position content per panel instead of treating the screen as one rectangle.

  2. Dual-pane email layout

    The list-detail pattern foldables were designed for. List in segments[0], message in segments[1], hinge becomes the divider. Same JS, three device shapes.

  3. Fold-Aware UI

    Simulate single-screen, book-fold, and tent-fold postures. The layout adapts in each mode: single pane, master-detail side by side, or content above with controls below — reflecting real folding patterns that the API enables.

  4. Posture-responsive demo

    An article reader that adapts to four device postures: phone portrait, phone landscape, book-fold, and tent-fold. Toggle between postures to see getWindowSegments() values, env(viewport-segment-*) CSS variables, and how each layout maps to the physical screen geometry.

why it shipped

Add a new CSS/JavaScript API to enable web developers to target a new class of foldable devices.

references