Designing for Dual Screen and Foldable Devices with CSS (2023)

Google’s recent launch of the Pixel Fold has revived interest in web design for foldable devices, prompting a look at the CSS tools that let developers adapt layouts to dual‑screen form factors. Two media queries—`(horizontal-viewport-segments: <count>)` and `(vertical-viewport-segments: <count>)`—detect whether a device’s screens sit side‑by‑side like an open book or stacked like a laptop, respectively. Complementing these queries are a set of environment variables (`viewport‑segment‑width`, `viewport‑segment‑height`, `viewport‑segment‑top`, `viewport‑segment‑left`, `viewport‑segment‑bottom`, `viewport‑segment‑right`) that return the exact dimensions and positions of each screen segment, allowing CSS Grid or other layout techniques to allocate content precisely across both displays without hard‑coding device‑specific sizes.

The practical impact of these features is illustrated through a demo that transforms a recipe page into a two‑column layout when viewed on a dual‑screen device. By using the environment variables as grid column values, the first column occupies the entire left screen while the second fills the right, or vice‑versa depending on orientation. This approach works on Microsoft Edge’s stable channel, where the queries and variables are fully supported, and can be tested in Chrome via an experimental flag and the Surface Duo emulator. The author notes that while many developers remain skeptical about investing in dual‑screen experiences, the growing shipment forecast—over 21 million foldables in 2023—suggests a sizable user base that could be reached by leveraging these web standards.

Adopting foldable‑aware design could differentiate a site or app, especially as the Pixel Fold signals the technology’s permanence. However, broader adoption hinges on browser and OS support; Chrome’s lack of stable implementation limits reach, and without consistent platform backing, designers may be reluctant to prioritize dual‑screen layouts. The article encourages developers to use data to assess whether their audience justifies the effort, points to a more detailed tutorial on Smashing Magazine, and ultimately urges the community to experiment with Microsoft Edge to explore the untapped potential of foldable web experiences.

⚡ Effects Interpreter