Designing for Dual Screen and Foldable Devices With CSS

Google's Pixel Fold has reignited discussions about designing for foldable devices. The announcement brought attention to two media queries that can be used to target foldable devices: horizontal-viewport-segments and vertical-viewport-segments. These queries determine how a device is being held, either side-by-side or stacked like a laptop.

Environment variables are also available to help with the geometry of each display on dual screen devices. These variables provide the x and y positions that create a two-dimensional grid, with 0,0 starting at the top-left segment. This allows for automatic calculation of dimensions by the device, eliminating the need to create designs for every unique device.

Using CSS Grid, developers can create layouts that adapt to the device's configuration. For example, a recipe page can change to a two-column layout when on a dual screen device. The environment variables can be used as grid column or row values to place and position content across the two screens. This capability has been implemented in Microsoft Edge Stable, but not yet in Chrome Stable, which is a missed opportunity for Chrome users with the Pixel Fold.

Despite some initial resistance from "naysayers," there are growing numbers of foldable devices being shipped. The forecast for foldables shipped in 2023 is expected to exceed 21 million devices, representing a significant opportunity for designers and developers to create innovative experiences. Ultimately, it is up to businesses to decide whether the investment in dual screen layouts is worth it based on their target audience.