// HACKER NEWS — CYBERSECURITY
Designing for Dual Screen and Foldable Devices with CSS (2023)
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.
There are two media queries for targeting your foldable device.
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.
In order to get the geometry of each display, a handful of environment variables have been created for dual screen devices.
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.