Device Posture API

Foldable devices present unique design challenges to developers — they can be used like a regular flat screen or like a book. In addition, some of them feature a single folded screen, and some of them feature two screens with a hinged join in the middle. Care must be taken to ensure that content is not hidden by the physical join, or rendered difficult to read due to close proximity to the central fold.

The Device Posture API defines postures, which indicate the current physical folding state of a device. The current available postures are:

continuous

Indicates a flat screen state. Foldable devices are continuous while they are flat; either fully opened or fully closed. Non-foldable devices are considered flat and therefore always continuous — this includes seamless curved displays and standard desktop, laptop, tablet, and mobile screens.

folded

Indicates a folded screen state. Foldable devices are folded while used in a book or laptop posture.

The Device Posture API includes features enabling you to run scripts and vary layouts depending on current device posture and posture changes.

device-posture @media feature

Detects the device's current posture.

DevicePosture

Represents the device's posture, providing access to the current posture type and a change event that fires on posture change.

Navigator.devicePosture

The entry point for the Device Posture API — returns the browser's DevicePosture object.

You can find a complete example showing all of the features in action in the Device Posture API demo.

If possible, you should view this on a foldable device. Current browser developer tools enable emulating foldable devices, but don't include emulation of partially folded devices — only fully open or closed — so they will always return continuous.

• Origin trial for Foldable APIs on developer.chrome.com (2024)