How Foldable and Dual‑Screen Devices Are Redefining Web Design

Foldable and Dual‑Screen Devices

Foldable devices (e.g., Huawei Mate X, Samsung Galaxy Z Flip) and dual‑screen devices (e.g., Microsoft Surface Neo, Surface Duo) bring new form factors that can dramatically change web design. When these technologies succeed, web development will face its biggest transformation in a decade.

These devices fall into two categories: foldable screens that physically bend, and dual‑screen devices where two separate displays work together. Both require web pages to adapt to larger, sometimes discontinuous, viewports.

Design Implications

Designers must consider new interaction patterns such as multi‑window, split‑screen, and single‑hand versus two‑hand usage. The increased screen real‑estate allows richer layouts, but naïvely stretching content wastes space. The principle "Content is like water" encourages fluid, adaptable designs.

Aspect‑Ratio Challenges

Traditional mobile aspect ratios (4:3, 16:9, 18:9) do not map cleanly to foldable devices, which often end up with intermediate ratios (3:2, 8:9, 9:9). Achieving a consistent media experience may require dynamic adjustments.

Technical Solutions

Web developers can use viewport‑width units (

vw

) via the

vw‑layout

approach, but image quality may suffer. Responsive design combined with device‑specific handling offers a better balance.

CSS Media Feature spanning

A new media feature

spanning

detects whether a window crosses multiple display regions. It has three values:

single-fold-vertical

– horizontal fold, layout spans two side‑by‑side screens.

single-fold-horizontal

– vertical fold, layout spans top‑bottom screens.

none

– no spanning.

Environment variables such as

fold-left

,

fold-width

,

fold-top

, and

fold-height

expose the size and position of the hinge, allowing precise CSS calculations.

<code>@media (spanning: single-fold-vertical) {
  body { flex-direction: row; }
  .map { flex: 1 1 env(fold-left); margin-right: env(fold-width); }
  .locations-list { flex: 1; }
}
</code>

JavaScript Window‑Segments API

The

getWindowSegments()

method returns an array of

DOMRect

objects describing each screen segment. Developers can use this data to adjust layout or add CSS classes.

<code>const segments = window.getWindowSegments();
if (segments.length > 1) {
  document.body.classList.add('is-foldable');
  document.querySelector('.map').classList.add('half');
  document.querySelector('.locations-list').classList.add('half');
}
</code>

Changes in segment count trigger the

resize

event, enabling dynamic updates.

Polyfills

Because the

spanning

feature and related environment variables are still drafts, developers can use the

spanning-css-polyfill

(install via

npm install --save spanning-css-polyfill

) and import it as a module or script to enable the feature in current browsers.

<code>import '/path/to/spanning-css-polyfill.js';
</code>

Practical Demo

A simple demo shows two columns that adapt to spanning states. In non‑spanning mode each column occupies the full width; in

single-fold-vertical

mode the columns sit side‑by‑side with a gap equal to the hinge width.

References

Web Platform Primitives for Enlightened Experiences on Foldable Devices – https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/master/Foldable/explainer.md

Window Segments Enumeration API – https://github.com/webscreens/window-segments

CSS Foldable Display Polyfill – https://github.com/foldable-devices/spanning-css-polyfill

Foldable Device Emulator – https://foldables-emulator.netlify.app/