This document specifies an API that allows web applications to request the angular value to which a device with a screen hinge is folded. Under the right conditions, and if allowed, the value representing the angle in degrees is returned.
Foldable devices come in many shapes and sizes. While the use cases for the ultrabooks of the past vary significantly from those of the new trend of mobile devices due to the inherent focus on screen real estate, the data in question is similar since it’s related to the angle of the fold.
The main interest in knowing the fold angle is because there are interesting opportunities in the area of responsive design that enable new user experiences. With these new devices, the user can choose to consume content and browse the web even when the device is not flat, in which case the developer might want to provide a different layout for the content depending on the state of the angle of the fold. We propose a way to expose information about the fold angle of the device to the developer. Additionally, developers would like to adopt content depending on the various modes and potentially also animate some of these transitions.
In order to cater to foldable devices, we propose the addition of 2 new media queries min-angle and max-angle which values can take an angle from the CSS data type.
@media(min-screen-fold-angle: 110deg) { ... }
@media(max-screen-fold-angle: 170deg) and (spanning: single-fold-vertical) { ... }We also propose a media query that would resolve to a set of fixed postures. These postures consist of a number of predefined values that each encompass a range of angles.
Among the values that the screen-posture query can take are:
- No Fold
- Laptop
- Tent
- Tablet
- Book
- Flat
@media (screen-fold-posture: laptop) { ... }
/*for a monitor scenario*/
@media (screen-fold-posture: flat) and (orientation: portrait) { ... }We also propose the addition of a new environmental variable, ‘screen-fold-angle’, which contains the value of the angle on which the screen is folded. The value of this environmental variable is of the CSS angle data type.
env(screen-fold-angle);The Window property screen returns a reference to the screen object associated with the window. It already houses a similar property orientation that itself has a value for an angle.
ScreenFold : EventTarget {
readonly attribute unsigned short angle;
readonly attribute ScreenFoldMode mode;
attribute EventHandler onchange;
}
enum ScreenFoldMode {
"laptop",
“...”,
}No stakeholder feedback has been given at this time.
Many thanks for valuable feedback and advice from:
