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.

@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

Browser compatibility

See also

• DevicePosture
• Device Posture API
• Using Media Queries
• @media