CSS device-posture: Foldable screen layouts
Layouts for foldable screens without device sniffing
Foldable layouts used to mean guessing from UA strings or viewport hacks. The device-posture media feature reports continuous or folded, so you can add a reading gutter only when the screen is actually folded.
/* guess foldables from UA or a magic viewport width */@media (max-width: 840px) { .list-view { margin-inline-end: 60px; }}/* JS: if (/Foldable|Duo|Pixel Fold/i.test(navigator.userAgent)) { ... } */@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; }}/* hinge gutter only when the screen is folded */device posture Browser Support
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Not ready for production without a fallback.
device-posture ships in Chrome and Edge 132+. Firefox and Safari have no support yet. Folded styles are progressive enhancement on top of a layout that already works when the feature is missing.
Real posture, not guesses
continuous means flat. folded means book or laptop posture. No user-agent parsing.
Pairs with orientation
Combine with orientation so the extra gutter sits on the fold, whether the device is landscape or portrait.
Phones stay continuous
Non-foldables always match continuous, so your folded rules do not fire on a normal laptop or phone.
How it works
@media (device-posture: folded) matches when a foldable is in a book or laptop posture. continuous covers fully open, fully closed, and every non-foldable screen, including curved desktop displays.
A common pattern is a two-pane app that needs a wider gap along the hinge. Pair posture with orientation: add margin-inline-end in landscape, and margin-block-end in portrait, so the gutter tracks the fold.
DevTools can emulate foldable form factors, but many tools only emulate fully open or closed devices, which still report continuous. Test on a real foldable when you can. Firefox and Safari do not support this media feature yet.