Limited availability
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).
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.
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.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.3