v132 · device

Device Posture API

This API helps developers to detect the current posture of a foldable device. The device posture is the physical position in which a device holds which may be derived from sensors in addition to the angle. From enhancing the usability of a website by avoiding the area of a fold, to enabling innovative use cases for the web, knowing the posture of a devic

concepts

  1. Device Posture

    navigator.devicePosture — foldable / laptop posture (continuous vs folded). Apps can react to physical device state without manual sensor wrangling.

  2. foldable layout

    The CSS half: map-over-list on continuous, side-by-side on folded via @media (device-posture: folded).

  3. live posture & event log

    Subscribe to navigator.devicePosture.change, see the current value, watch every transition timestamped. Pair with DevTools > Sensors to fake the events.

  4. CSS fallback strategy

    Four CSS strategies that degrade gracefully to non-foldable devices, with a table of which scenario wants which strategy.

why it shipped

New types of devices are appearing that have some sort of capabilities that allow them to change their posture. The most common types of devices are the ones that can fold (their screen or around their screen), allowing them to physically alter their form factor.

references