This document specifies an API that allows web applications to request and be notified of changes of the posture of a foldable device.
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 device posture 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 how the device is being used. We propose a way to expose information about the posture of the device to the developer.
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 device-posture query can take are:
- No Fold
- Laptop
- Tent
- Tablet
- Book
- Flat
@media (device-posture: laptop) { ... }
/*for a monitor scenario*/
@media (device-posture: flat) and (orientation: portrait) { ... }The Navigator property of Window navigator should host device capabilities and system states.
DevicePosture : EventTarget {
readonly attribute DevicePostureType type;
attribute EventHandler onchange;
}
enum DevicePostureType {
"laptop",
“...”,
}No stakeholder feedback has been given at this time.
Many thanks for valuable feedback and advice from:
