The CSS Trick That Makes Foldables Click

A device's hinge can change a web page, not just the hardware. The CSS device-posture media feature offers a powerful way to adapt web content. It distinguishes between a continuous screen, like a flat tablet, and a folded posture, enabling styles to respond directly to the device's physical state.

A recent video from Better Stack demonstrated this by showing a page that changed from "flat" to "folded" when a hypothetical Apple foldable device was bent. While the video references a "$2,000 foldable phone" or "iPhone Surface Duo," Apple has not announced such a product; these are speculative examples to illustrate the technology.

This capability, also available via a JavaScript API, isn't just for showing off. The goal is purposeful design. For instance, a video player could display full-screen when the device is continuous and then automatically adapt to show the video on one segment and chapter details or comments on the other when folded.

Google Google Chrome already supports these features, and Samsung Internet has offered similar capabilities for years for devices like the Galaxy Z Fold. Safari has implemented the APIs in an "iPhone Surface Duo" simulator, though they remain behind a feature flag, indicating early development rather than general availability. Firefox does not yet support these features.

Just as CSS adapts to a device's physical state, JavaScript offers a powerful counterpart: the Device Posture API. You can access the current posture through navigator.devicePosture and, more importantly, listen for changes using its change event. This event fires whenever the device transitions between states like continuous (flat) and folded, letting your web app react dynamically.

Imagine more than just a playful fold counter! With this API, you can implement truly useful behaviors. A video player could automatically pause playback when the device folds, preventing accidental skips, or a text editor might save unsaved edits. For multi-step tasks, a fold could trigger a transition to the next step, ensuring the user's context remains intact.

Remember, posture is a signal, not an instruction for the user. Avoid surprising users by drastically altering core functionality or making actions harder to reach just because the device bent. Instead, use these signals to enhance the experience, ensuring primary actions remain intuitive and accessible regardless of whether the screen is flat or folded. Google Google Chrome and Samsung Internet already support these features, offering robust tools for building adaptable interfaces.

Physical hinges on foldable devices aren't just hardware features; they can carve a single display into multiple viewport segments. This means a folded screen can expose separate, logical regions, letting developers assign complementary content to each side. Instead of awkwardly placing key controls or content directly across a crease, you can design distinct panes.

Consider a video player: when the device is flat, it can fill the entire screen. But when folded, you could keep the video playback on one segment and display chapters, descriptions, or comments on the other. This creates a more intuitive and efficient user experience, making the most of the unique form factor.

CSS offers segment media features like horizontal-viewport-segments and vertical-viewport-segments to detect and style these individual regions. You can size elements precisely using environment variables such as env(viewport-segment-width 0 0) or env(viewport-segment-height 0 0) within calc() expressions. This helps avoid placing critical UI elements directly over the physical hinge.

While these tools are powerful, always ensure your layouts degrade gracefully on traditional, continuous screens. Google Google Chrome and Samsung Internet have supported these features for years, with WebKit also making progress behind flags. For deeper technical details, explore the Device Posture API - W3C specification.

So, where can you actually use these clever foldable features today? Google Google Chrome and Samsung Internet lead the pack, offering robust support for device-posture and viewport segments. Samsung Internet pioneered these features years ago for its Galaxy Z Fold and Flip devices, while Google Google Chrome recently promoted them from origin trials to baseline support.

Firefox, unfortunately, does not currently support these APIs. Safari and WebKit have shown some experimental work within a specific "iPhone Surface Duo" simulator, but these features remain behind a flag, not generally available. Always check current MDN references and browser compatibility tables, as support evolves rapidly with each new browser version.

When you build for foldables, embrace progressive enhancement. First, detect if navigator.devicePosture exists before attempting to use it. Second, design a useful, baseline layout that works well on all continuous screens, then layer on foldable-specific styling.

Always test your interface across posture transitions. Never make essential content or functionality depend solely on a folded state; ensure a seamless experience, whether the device is flat or bent. Your users will thank you for the thoughtful design.

What does the CSS device-posture media query do?

It lets a webpage apply styles based on a device’s physical posture, such as whether a foldable screen is folded or continuous.

How do viewport segments help with foldable screens?

They expose the distinct regions of a segmented display so a page can place content on each side of a hinge or crease.

Can JavaScript detect when a foldable phone changes posture?

Yes. The Device Posture API exposes the current posture and a change event that lets a page respond when it changes.

Do all browsers support foldable-device web APIs?

No. Support varies: Chromium-based browsers and Samsung Internet offer capabilities, while Firefox lacks implementation and Safari support has been experimental.

Has Apple released a foldable iPhone?

No foldable iPhone has been announced. The video discusses a hypothetical device and reports experimental Safari work, not a confirmed Apple product.