Viewport Segments API #1440

Description

Foldable phones, tablets, and multi-posture laptops represent a growing segment of hardware. While the Device Posture API indicates how a device is held (e.g., folded vs continuous), developers need exact geometric segment boundaries to position columns, sidebars, and critical interface elements without content falling into a physical hinge or fold seam.

The latter is provided by the Viewport Segments API. It exposes the positions, dimensions, and count of logically separate viewport regions formed when a viewport is split across physical folds, hinges, or dual-screen displays. It provides both declarative CSS tools (@media (*-viewport-segments) and env(viewport-segment-* x y)) and imperative JavaScript properties (window.viewport.segments).

Spec links:

• https://drafts.csswg.org/css-viewport/#dom-viewport-segments
• https://drafts.csswg.org/css-env-1/#viewport-segments
• https://www.w3.org/TR/mediaqueries-5/#mf-horizontal-viewport-segments

Specification

(See description, as there are several specs involved)

web-feature

viewport-segments

Test Links

• https://wpt.fyi/results/viewport/viewport-segments.html
• https://wpt.fyi/results/viewport-segments

Additional Signals

• Blink / Chromium:
  • Shipped (https://chromestatus.com/feature/5544704043646976)
• Gecko / Firefox:
  • Not implemented
  • Standards Position: no position
• WebKit / Safari:
  • Available behind a feature flag in Safari 27.1 beta (simulator)
  • Standards Position: no position

(This features goes hand-in-hand with the Device Posture API, but serves a different purpose)