Designing for Dual Screen and Foldable Devices with CSS (2023)
6 days ago
- Two CSS media queries target foldable devices: horizontal-viewport-segments for side-by-side screens and vertical-viewport-segments for stacked screens.
- Environment variables like env(viewport-segment-width) and env(viewport-segment-height) provide geometry for each display segment, enabling responsive layouts across screens.
- These variables can be used with CSS Grid to create multi-column layouts that span the two displays, as shown in a recipe demo.
- Dual screen mode is not mandatory but can be beneficial if data shows customers use foldable devices; it's also a way to stand out.
- The forecast for foldable devices shipped in 2023 is over 21 million units, indicating a growing market.
- Browser support is currently limited to Microsoft Edge Stable; Chrome requires enabling the experimental web platform flag to test.
- The foldable space is ripe for innovation but lacks full browser and OS support, which hinders widespread adoption.