CSS Finally Lets You Design for Foldable Devices
Designing for Dual Screen and Foldable Devices with CSS (2023)
With Google's Pixel Fold launch, Stephanie Stimac revisits CSS features for dual-screen and foldable devices. She explains media queries like horizontal-viewport-segments and vertical-viewport-segments, plus environment variables that calculate display geometry. A recipe page demo shows how to switch to a two-column layout using CSS Grid. Browser support is limited to Microsoft Edge Stable, with Chrome requiring an experimental flag. Stimac argues that foldables are here to stay and that designing for them can set your product apart.
The Pixel Fold reinforces that foldables are here to stay, so why not delight your users?
- socalgal2
I'm not sure I'm convinced.
If splitting the UI is useful then it feels like you should just let me choose to split it even on a single display rather than deciding for me. My laptop has a display aspect similar to a folding phone when unfolded, so if splitting each half of the display into two panes is useful it should be useful regardless of device.
Personally if I bought a folding phone, I'm probably buying it specifically because I want a bigger display for existing content. I don't want your app to decide for me, to treat it like 2 displays. Imagine in vi or emacs auto split panes based on your aspect as shown in the article. No please! Let me choose when I want it split
- ChiperSoft
And of course, Safari does not yet support this as of the tech previews.
- DarmokTanagra
Apple Duo screen UX assumes the entire planet is right handed.
The new Duo exhibits Apple Mouse scale UX oversights.