How Foldable and Dual‑Screen Devices Are Redefining Web Design

Foldable and Dual‑Screen Devices

Foldable devices come in many forms, from laptops to phones to novel dual‑screen hybrids. They can be classified into two groups: devices whose screens fold (e.g., Huawei Mate X, Samsung Galaxy Z Flip) and dual‑screen devices whose screens are separate but work together (e.g., Microsoft Surface Neo, Surface Duo). If this technology succeeds, web design will face its biggest transformation in a decade.

New Challenges, Opportunities, and Concepts

The rise of foldable web brings new challenges, opportunities, and concepts. The internet may undergo its biggest change since smartphones. Major manufacturers have already released foldable hardware, and companies like Microsoft and Apple are working behind the scenes. Developers must consider whether web pages can run perfectly on foldable and dual‑screen devices.

Design Implications

Foldable and dual‑screen devices increase usable screen space, allowing richer multitasking and content placement. Designers must avoid simply stretching layouts; instead, they should adopt fluid, water‑like content flow, responsive design, and consider multi‑window, multi‑app scenarios. Single‑hand versus two‑hand interaction also changes when a device unfolds.

Future Web Technologies for Foldables

Microsoft developers Bogdan Brinza, Daniel Libby, and Zouhir Chahoud proposed two key primitives: a CSS media feature for foldable layouts and a JavaScript API for enumerating window segments. These enable web developers to detect spanning windows and adapt UI accordingly.

CSS Features for Dual‑Screen Layouts

The proposed CSS media feature spanning can detect whether a window crosses multiple display regions. It has three possible values: single-fold-vertical (horizontal fold, side‑by‑side screens), single-fold-horizontal (vertical fold, stacked screens), and none (no spanning). This feature is still a W3C draft.

CSS Media Feature: spanning

@media (spanning: single-fold-vertical) {
  body {display: flex; flex-direction: row;}
  .map {flex: 1 1 env(fold-left);}
  .locations-list {flex: 1;}
}

Developers can also use the env() function with variables such as fold-top, fold-left, fold-width, and fold-height to size elements precisely.

CSS Environment Variables for Foldables

These variables work like safe‑area insets and allow calculations of each screen segment’s size. When not spanning, they fall back to the values provided to env().

JavaScript API for Window Segments

The window.getWindowSegments() method returns an array of DOMRect objects describing each visible segment. Developers can use the result to detect foldable devices and adjust layout classes.

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

Changes in spanning or resize events can be listened to for dynamic updates.

Polyfills and Demos

Because the spanning feature and environment variables are still drafts, a polyfill ( spanning‑css‑polyfill ) is available via npm. After installing, include spanning-css-polyfill.js as a module or import it. The polyfill also provides a FoldablesFeature object to manually set values and listen for changes.

import '/path/to/spanning-css-polyfill.js';
const foldables = new FoldablesFeature();
foldables.onchange = () => console.log('change');
foldables.foldSize = 20;

Several demos illustrate basic and advanced layouts, including a simple two‑column example that changes colors and content based on the spanning state, and a more complex grid that adapts using env() values.

Conclusion

Foldable web expands the design space beyond the constraints of traditional handheld devices. Some applications will need minor adjustments, while others may require a complete redesign. The extent depends on developers’ creativity and the adoption of emerging standards.

References

Web Platform Primitives for Enlightened Experiences on Foldable Devices – GitHub

Window Segments Enumeration API – GitHub

CSS Foldable Display Polyfill – GitHub

Foldable Emulator – Web Demo