[css-media-queries] Foldables support and enablement #4141
Android Q beta has support for folding the screen in the emulator and a list of features and APIs to support developers in using and adapting to foldable screens, I'd like to see the web have similar offerings in the form of a new @media query or queries.
This new device/OS state is not the same as orientation or device width. It's more than that, as a webapp could project content while in a folded state onto the back or side of a device.
Designers and developers should be able to leverage or adapt to these foldable device states and either project content onto another half of the device, or just simply adjust to the wider or thinner viewports respectively. There are many options, designs, patterns, etc for how to handle and adjust to foldable phones, all of which are being pioneered or explored right now as the technology unfolds (
From the Android blog:
The ability to handle this transition shouldn't be limited to native apps, the web should have hooks into handling this as well.
These are just my initial aggregated thoughts and assumptions from my research on which media queries would be useful. I hope to expand upon it greatly to cover the matrix of possibilities and unblock engineers on the web.
I envision these media queries assisting and enhancing:
I'm feeling like this media query could be very complex, as it needs to provide syntax for a wide array of foldables. That being said, the types of experiences and adaptations that web pages could do with the display hooks would make for very interesting and meaningful interactions. We should work towards enabling the web to handle the upcoming array of devices.
Yeah, those diagrams showing a 3-panel folder make me very nervous about designing a MQ here. Gives me flashbacks to trying to generalize about a rounded-screen MQ, which proved impossible.
The core question we have to answer here is, what questions should we enable the author to ask, such that they can do something useful with the answer? I'm not seeing very many sorts of questions I could ask that would let me usefully design to both a side-folding phone and a 3-pane tablet. :(
A JS API can be more fine-grained in answers, perhaps.
There might still be some stuff we can usefully extract here, tho. This could use some exploration. Like, maybe we can catch just "the X edge is folded", with a fallback "lol this is complicated good luck" value.
I agree that this needs to go beyond media queries. You need to be able to target the different parts of the screen for layout in some way. At the very least, there would need to be environment variables defining the areas and their dimensions, so that you could create a CSS grid on your root element that defines the different screen panels as different grid areas.
And it makes sense to approach this in a more general way, and consider the ability to have a single website control two screens for working with dual monitors or a projector. Another device with a secondary screen is the mac "touch bar" screen. I think apps have a way to draw content here, I'm not sure if there is any interest in exposing that screen to websites (or if it is better to let it be used for browser controls).
But, we need to distinguish between second screens/panels that should only be used for sidebar/controls, versus those where it makes sense for the main body context to fragment across & fill up the extra screen. With a folding screen, this could be the difference between a bent screen (like a book, you might want a column of text on each side, paginated to fit the screen) and one completely folded over (you could put the nav on the back, but might want to have the main text on the front screen in a scroller).
It's also worth thinking about how much user-control there should be. I assume there would be a user setting of the form "if my screen is folded, only use the front screen" vs "use both screens". Are there other relevant user preferences? If so, how should these variations be exposed?
Just from this discussion, I think there are two incomplete areas of CSS layout that need to be resolved to make these layouts really useful: CSS regions (fragmented text across grid regions representing panels of different sizes), and for screens.
Is it really crucial that this is a "Foldable" concept? Or is it rather more general to talk about a series of viewports that you might be able to display into, and the geometry of those edges?
Aka if I have 2 panels, can I choose to display a seamless thing across them? or are they distinct screens that aren't close to each other?
Right, so I meant to elaborate my idea, you could have any number of viewports, that would attach to each others in different ways.
Additionally, it's not hard to imagine a multi-display device, that slides one screen behind another (locking at different positions) in some circumstances, rather than "folding". -- As long as the metaphor covers different edges cases like this, then I don't exactly "care" if it uses the word foldable in the name, I just wanted to make sure we didn't design this without thinking about things that aren't strictly folded into place.
For the specific issue of avoiding putting content on the fold itself (the seam/spine as the screen wraps around a bend), this seems to be similar to the "safe inset" regions for notched iPhones. Within each screen panel, there will be some parts of the screen that you could paint a background on, but wouldn't want to put important content.
However, the finite set of safe inset margins currently defined for CSS environment variables falls apart if you need margins for many different layout regions.
Yes, I assume that, in cases like the folded-phone where it's just "small screen with folded edge" vs "large screen, normal edges", we can specify that safe-inset will communicate the size of the fold-region so you can avoid it if that's all you're worried about.
So my thoughts right now are: