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 anexperimental technology
Check theBrowser compatibility table carefully before using this in production.

Thedevice-postureCSS media feature can be used to detect the device'scurrent posture, that is, whether the viewport is in a flat (continuous) or folded state (folded).

Syntax

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

continuous: Indicates a flat screen state. Foldable devices arecontinuous while they are flat; either fully opened or fully closed. Non-foldable devices are considered flat and therefore alwayscontinuous — this includes seamless curved displays and standard desktop, laptop, tablet, and mobile screens.
folded: Indicates a folded screen state. Foldable devices arefolded while used in a book or laptop posture.

In this example, thedevice-posture media feature detects when a device is in a folded posture, adding a margin based on itsorientation 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 theDevice 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 returncontinuous.