- From: Adam Argyle via GitHub <sysbot+gh@w3.org>
- Date: Mon, 22 Jul 2019 18:11:49 +0000
- To: public-css-archive@w3.org
argyleink has just created a new issue for https://github.com/w3c/csswg-drafts: == [css-media-queries] Foldables support and enablement ==  ## Why [Android Q](https://developer.android.com/preview/features/foldables) beta has support for folding the screen in the [emulator](https://developer.android.com/preview/features/foldables#emulators) 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. **Imagine an `<aside>` literally on a foldable side of a device while reading an article.** ## What As I dig into the Android featureset and APIs, the nature of the media query feels akin to how devs work with [projectors](https://www.w3.org/TR/css3-mediaqueries/) and [orientation](https://www.w3.org/TR/css3-mediaqueries/). 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](https://android-developers.googleblog.com/2018/11/get-your-app-ready-for-foldable-phones.html): > On this new form factor, your application could be transitioned from one screen to another automatically (eg. when folding / unfolding a foldable phone). > During this transition, your app will receive a configuration change for the new layout (and possibly density in some cases). The ability to handle this transition shouldn't be limited to native apps, the web should have hooks into handling this as well.    ## How 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. 1. is foldable screen 1. is consuming all screens 1. is folded vertically 1. is folded horizontally 1. is on main screen 1. is front / is back 1. is on screen (1-n) 1. can project onto screen (1-n) I envision these media queries assisting and enhancing: - css env vars - regions! - device width and height media queries - portrait and landscape media queries  ## Conclusion 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](https://www.tomsguide.com/us/foldable-phones-release-date,news-28705.html). ##### Links/References - https://www.w3.org/TR/css3-mediaqueries/ - https://developer.android.com/preview/features/foldables Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4141 using your GitHub account
Received on Monday, 22 July 2019 18:11:50 UTC