Back to Devoured - October 01, 2026
DEVOURED
A Short Update on Designing for Foldable Devices

A Short Update on Designing for Foldable Devices

Design frontendweb Stephanie Stimac
Despite the release of the iPhone Duo, browser support for foldable device APIs remains locked within Chromium, leaving Safari users behind.
What: Developer Stephanie Stimac highlights that the Device Posture API and Viewport Segments API lack support in Safari, complicating cross-platform development for foldable screens.
Why it matters: The fragmented state of foldable browser support forces web developers to decide between building experiences that are "dual-screen aware" or sticking to responsive designs that ignore device-specific physical affordances.
Takeaway: Use Chrome DevTools to emulate Surface Duo and Galaxy Z Fold configurations if you decide to implement dual-screen contexts for specific workflows.
Decoder
  • Device Posture API: A browser API that reports whether a device is in a "folded" or "flat" state.
  • Viewport Segments API: A browser API that provides the geometry and coordinates of individual screens on a foldable device, allowing developers to manage content placement around the hinge.
Original article

A Short Update on Designing for Foldable Devices

And here we are three years after I wrote about the Google Pixel Fold being announced, followed now with the announcement of the iPhone Duo...(I have questions about the naming by the way).

Four years ago I was talking about web primitives in the platform for the Surface Duo. My how time flies.

There are CSS media features, a Viewport Segments API, a Device Posture API but Chromium based browsers are the only ones currently supporting these things.

I haven't been able to find any signal yet on whether Safari will support these things in the web platform as the developer docs focus on application development.

If you're interested in trying out the platform features, you can emulate the Surface Duo and Galaxy Z Fold in the developer tools.

And if you're thinking, do I really have to have my website adapt to two screens? The answer is no. Adding a design to an application or dual screen makes sense if you have an experience that has two simulataneous contexts that are useful e.g. a list of email messages/inbox on one screen, an open message, email thread or email composer on the other.

Here's one of my talks from 2022 if you're interested in learning more about what's available in the browser for dual screen/foldable devices.

Happy building :)

Explore all 58 articles in today's digest

Fresh dev news, AI-digested daily. Never miss a trend at devoured.fyi