device-posture

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The device-posture CSS media feature can be used to detect the device's current posture, that is, whether the viewport is in a flat (continuous) or folded state (folded).

Syntax

The device-posture feature is specified as a keyword value chosen from the list below:

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.

Examples

In this example, the device-posture media feature detects when a device is in a folded posture, adding a margin based on its orientation to create a larger gutter between the application's two panels for easier reading.

css
@media (device-posture: folded) and (orientation: landscape) {
  .list-view {
    margin-inline-end: 60px;
  }
}

@media (device-posture: folded) and (orientation: portrait) {
  .list-view {
    margin-block-end: 60px;
  }
}

To see the above code in action, view the Device Posture API demo on a foldable device if possible. Current browser developer tools enable emulating foldable devices, but don't include emulation of partially folded devices — only fully open or closed devices — so they will always return continuous.

Specifications

Specification
Device Posture API
# the-device-posture-media-feature

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
device-posture media feature
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support
Experimental. Expect behavior to change in the future.

See also