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.

@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; }
}

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.

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');
}

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.

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

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/