Designing for Dual Screen and Foldable Devices With CSS - Stephanie Stimac's Blog

Portfolio
Design for Developers
Newsletter
Contact

Designing for Dual Screen and Foldable Devices With CSS

Published on
11 May 2023

Tags
web platform
css

With the announcement of Google's Pixel Fold, I thought its an apt time to revisit what technologies are available for designing and developing experiences that adapt to a foldable device.
Let's ignore the naysayers who vehemently don't want to design for a new form factor, while also ignoring the price of Goggle's first generation device and just focus on what's possible right now.
CSS Media Queries for Viewport Segments #
There are two media queries for targeting your foldable device.
@media (horizontal-viewport-segments: <count>) { }
@media (vertical-viewport-segments: <count>) { }

The horizontal-viewport-segments query targets the device when it is being held like a book and the two screens are side-by-side.
And vertical-viewport-segments targets the device when the two screens are stacked on top of each other and fold like a laptop. I've found this mode useful when using my Surface Duo with PowerPoint. I can access my speaker notes on the bottom screen and my presentation is on the top screen. Pretty snazzy.
CSS Environment Variables #
In order to get the geometry of each display, a handful of environment variables have been created for dual screen devices.
env(viewport-segment-width <x> <y>);
env(viewport-segment-height <x> <y>);
env(viewport-segment-top <x> <y>);
env(viewport-segment-left <x> <y>);
env(viewport-segment-bottom <x> <y>);
env(viewport-segment-right <x> <y>);

The x and y positions represent the two-dimensional grid created by hardware features that separate each viewport segment, with the coordinates 0,0 starting at the top-left segment.
]
Environment variables are cool because they will calculate dimensions by the device and make the adjustments for you meaning you don't have to create designs for every unique device out there. There are a number of foldable devices already and they all have different screen and hinge dimensions.
This set of environment variables also lets you place and position content across the two screens.
In my demo, I've built a recipe page that changes to a two column layout when on a dual screen device. I'm using CSS Grid and I can use the environment variables as grid column or row values.
@media (horizontal-viewport-segments: 2) {

.container {
grid-template-columns: env(viewport-segment-width 0 0), 1fr;
}

}

This line of code means that the first grid column will take up the entirety of left display when the device is held in the vertical position (like a book), and the second grid column will take up the remaining width of the display space available, which is the display on the right.
If you wanted to be more explicit, you could write:
@media (horizontal-viewport-segments: 2) {

.container {
grid-template-columns: env(viewport-segment-width 0 0) env(viewport-segment-width: 1 0);
}

}

Again, this means that each column takes up a display. Pretty sweet.
When should you include a dual screen mode in your product? #
Back to the naysayers. When I first started talking about dual screen design, so many people reacted negatively. And honestly, no one is forcing you to create a website or app that adapts when it's spanned across two displays.
With the Surface Duo, you can utilize the browser in one display pane and it displays like a normal responsive website. Not every site or app does need a dual screen mode, but its best to find out what kind of devices your customers are using and whether or not a dual screen mode is worth the investment. As always, use data to guide your decisions.
The forecast for foldables shipped in 2023 is expected to be above 21 million devices (source). Compared to the mobile device market, its just a sliver, but that's still millions of foldables being used out there.
The other reason I'd create an app or website that adapts for a foldable device? If I wanted to stand out.
The Pixel Fold reinforces that foldables are here to stay, so why not delight your users?
Browser Support #
The media queries and environment variables are currently supported in Microsoft Edge Stable.
Unfortunately, Chrome Stable doesn't appear to have the same support yet which seems like a huge miss for the Pixel Fold & Chrome teams. You can enable the experimental web platform flag under chrome://flags and test in Chrome with the Surface Duo emulator.
Closing #
This article is just an overview and reminder that these capabilities exist for foldable web and app experiences. The space is ripe for innovation in design and layout on the web (and for native apps) as new foldable devices ship, but without the browser and OS support, companies won't be able to get devs and designers to take building foldable experiences seriously.
If your'e still interested exploring what's possible with dual screen layouts, I've a much more in depth article over on Smashing Magazine that walks through the recipe demo I made for the web. So download Microsoft Edge and happy building.

← Home

Affiliate Notice
I sometime use affiliate links when linking to products. I may receive a small commission at no cost to you. This helps fund the cost for my site.

Follow Me

© 2026. Stephanie Stimac - All rights reserved.

Stephanie Stimac explores the technologies available for designing and developing experiences that adapt to foldable devices, focusing on native web and application development using CSS. She addresses the possibility of adapting designs for dual-screen layouts, setting aside initial resistance to the new form factor and focusing instead on current technological feasibility and potential user delight.

Stimac introduces two primary methods for targeting the unique geometry of foldable devices using Cascading Style Sheets. The first method involves using CSS Media Queries for Viewport Segments, which allows targeting the device's configuration based on how the screens are arranged. Specifically, there are media queries for horizontal viewport segments and vertical viewport segments. The horizontal-viewport-segments query is designed for devices held side-by-side, mimicking a book layout, while the vertical-viewport-segments query targets devices where the screens are stacked, resembling a laptop.

The second, more powerful technique involves utilizing CSS Environment Variables to acquire the precise geometry of each display. A set of environment variables is proposed to capture the spatial data separating the viewport segments, including variables for width, height, top, left, bottom, and right coordinates. These variables are calculated by the device hardware, meaning they inherently adjust dimensions based on the specific hinge and screen dimensions of any given foldable device, thereby eliminating the need to create bespoke designs for every unique device configuration. These environment variables also provide a framework for positioning and placing content across the two physical screens.

Stimac demonstrates how these techniques can be applied practically, utilizing CSS Grid to implement dynamic layouts. For instance, she shows how the media queries can control the grid structure, enabling dynamic changes in column definitions. By using environment variables as values for grid templates, designers can define how content spans across the distinct screen areas. For example, when targeting a horizontal mode, the grid template columns can be defined using the width variables of the respective viewport segments, allowing the layout to automatically allocate space based on the physical screen dimensions.

The rationale for incorporating dual-screen design into product development centers on market relevance and user experience. Although some initially opposed this direction, Stimac suggests that it is beneficial to assess user requirements and market trends, such as the projected high volume of foldable devices, to guide design decisions effectively. Furthermore, designing adaptable experiences can be a means to differentiate a product and enhance user satisfaction.

Regarding implementation, Stimac notes current browser support limitations, stating that the media queries and environment variables are currently supported in Microsoft Edge Stable. She points out that Chrome Stable does not currently offer this support natively, although experimental flags can be used to test functionality. Stimac concludes by emphasizing that while these capabilities exist for enhancing foldable web and app experiences, widespread browser and operating system support is crucial. This support is necessary to ensure that developers and designers are incentivized to seriously pursue the innovation of adaptable layouts as new foldable devices continue to be released.