Foldables Redraw the Responsive Map
Foldable smartphones have moved from concept videos to retail shelves, with Samsung, Huawei, and Motorola shipping devices and Apple reportedly working on its own entry. But the hardware is only half the story. The more interesting question for the web community is what these new form factors mean for the sites running on them.
The devices themselves come in two broad flavors: true foldables, where a single screen bends, and dual-screen designs, where separate panels join to act as one. Some fold outward, some flip shut like a classic clamshell, and many carry a smaller external display for quick glances. Rules for web development are expected to converge across these variations, since the underlying layout challenges are similar.
Hardware Catering, or Standards Work?
Large-scale development of flexible screen tech dates back to research in the 1970s, though consumer devices only appeared in earnest over the last few years. As with any new hardware category, there are rough edges—display durability issues have been widely reported—but the devices are now firmly on the market and on the roadmap.
Microsoft, which is building its own foldable hardware, has been especially proactive on the software front. Three of its developers—Bogdan Brinza, Daniel Libby, and Zouhir Chahoud—published a proposal covering a new CSS media feature, environment variables, and a JavaScript API. The suggestions target a few specific pain points:
- Form factor fragmentation. Book-style devices like the Surface Duo and Galaxy Fold differ from the square-halved Razr, and seamless screens behave differently from those with a visible seam. Three-panel devices are presumably not far off, so the goal is to address a class of hardware rather than any single product.
- The fold area itself. Content rendered across a hinge or bend can become hard to read or interact with—a problem print media solved centuries ago by avoiding the gutter. Touch response on some foldables has also tested less reliably near the seam.
One proposal is a spanning CSS media feature that tests whether the browser window runs across two display regions. Accompanying environment variables would expose segment sizes and orientations, letting a page respond differently when a device is flat versus folded into an L shape. Layout would effectively gain a third dimension, with CSS able to account for where the screen bends.
On the scripting side, a proposed Window Segments enumeration would let JavaScript react to the device's physical state—for example, changing content when a phone is folded or distinguishing touches on one half of a display from the other. This matters beyond the DOM; a JavaScript API can also bring segment awareness to Canvas2d and WebGL, where CSS does not reach.
The current proposals stop at two segments, but the approach lines up with the path responsive design has been on for years. As Chahoud puts it:
"We view dual-screen and foldable devices as another responsive web design target, something web developers have been doing for years with CSS specific to phones, desktops, tablets, and so on."
Your Fold Problem Just Got a Sequel
Designers have worried about content sitting "below the fold" since the newspaper era. Foldables introduce a fold in the middle of the page. Regardless of whether a device has a visible seam or a seamless bend, content spanning that boundary risks being obscured or awkward to interact with.
At minimum, layouts will need to keep crucial controls off the hinge line, positioning interactive elements cleanly on one half or the other. Chahoud sees this as more than a constraint, calling the fold an opportunity that splits the display into "two nicely defined display regions." The secondary benefit is real: a partially folded screen doubles as a stand, a use case already demonstrated in the wild by early adopters.
The experience has an unlikely ancestor. Strip away the seamless panel tech and the foldable web resembles the Nintendo DS: one device with two coordinated displays. Samsung's developer documentation pushes this further, suggesting the second half can itself be split to yield three logical screens. A basic layout target, Chahoud suggests, would be a two-column grid where each column maps to a display segment.
Content would carve up along those lines: one panel for the recipe, the other for ingredients; article text on the left with related reading on the right. If that sounds app-like, it is—an obvious step in the ongoing blur between web and native presentation.
More Tablet Than Revolution
Not everyone expects a paradigm shift. Steve Krug, author of Don't Make Me Think!, sees foldables as the next reasonable step, driven by the appeal of a tablet that fits in a pocket. He points out that many apps will not gain much from split-screen layouts; a bigger surface for watching video is the status quo, better, not a new paradigm.
There is an argument that the larger opportunity is simply better support for tablet-sized viewports. Tablets currently account for roughly three percent of global platform market share, versus over half for mobile. Should foldable sales move that needle, designs that already feel comfortable at tablet widths will have a head start. When a dominant player such as Apple ships a foldable, the market will expand regardless.
The near-term takeaway is more practical than philosophical: as foldables proliferate, existing responsive designs will need to keep working across new shapes, orientations, and a flexible seam. If the proposed CSS and JavaScript primitives land in time, developers can focus on that work rather than on reinventing layout mechanics mid-hardware-cycle. The foldable web may not upend expectations completely, but it is adding a few wrinkles that are difficult to iron out later.
Where the Foldable Web Goes From Here
If there is a single takeaway, it is that the foldable web does not have a fixed definition yet. It is probably best understood as the next iteration of responsive design. The CSS and JavaScript features now emerging let developers build for multiple screens and physical states, whereas earlier approaches assumed one uninterrupted rectangle across desktop, mobile, and tablet.
No one should expect the foldable web to arrive fully formed. Adoption is not guaranteed, particularly while many foldable devices still cost upwards of 2,000 dollars. The hardware will have its own teething period, and it will take time before the technology settles into dependable conventions.
That gives designers and developers room — and responsibility — to push the platform. The foldable web is a chance to make websites more fluid and more functional than single-screen layouts allow. It is also an opportunity to work on genuinely new territory. The change may not be seismic, but it is likely the most significant shift in the status quo since the iPhone. What the syntax eventually looks like is still up for debate; web standards are not dictated from above. Feedback, experimentation, and early contributions can shape the outcome.
Getting Involved
Developers who want to help define the foldable web have several avenues for participation:
- A proposal for new CSS primitives for foldable and dual-screen experiences by Zouhir Chahoud on the W3C CSSWG GitHub issue tracker.
- A discussion on foldables support and enablement in
css-media-queriesby Adam Argyle, also on the CSSWG issue tracker. - The Windows 10X dual-screen emulator, downloadable from the Windows TenForums tutorial.
- Microsoft Edge Insider Channels, available from the official insider download page.
Mobile-first design is about to become more complicated — and more promising. Foldable devices may be the first time handheld screens feel expansive instead of limiting. For some sites that will mean modest adjustments; for others, a complete rethink. The limit is largely a matter of developer imagination.
