Skip to content

w3c/device-posture

gh-pages
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

favicon

Device Posture API

Authors

Abstract

This document specifies an API that allows web applications to request and be notified of changes of the posture of a device.

Goals

The device posture is the physical position in which a device holds which may be derived from sensors in addition to the angle. New types of mobile devices are appearing that have some sort of capabilities that allow them to change their posture. The most common types of devices are the ones that can fold (their screen or around their screen), allowing them to physically alter their form factor. The main interest in knowing the posture of a device is to enable new user experiences with responsive design.

Proposals

New CSS media query: device-posture

We 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:

  • folded (applies to laptop/book postures)
  • folded-over (applies to tent modes)
  • continuous (applies to flat, tablet, or even seamless curved displays)

Examples

/*using the device in a 'book' posture*/
@media (device-posture: folded) and (screen-spanning: single-fold-vertical) { ... }

/*using the device in a 'tent' posture*/
@media (device-posture: folded-over) { ... }

New JS object in window.navigator: devicePosture

The Navigator property of Window navigator should host device capabilities and system states.

Proposed Object

DevicePosture : EventTarget {
  readonly attribute DevicePostureType type;
  attribute EventHandler onchange;
}

enum DevicePostureType {
  "folded",
  ...,
}

Stakeholder Feedback

No stakeholder feedback has been given at this time.

References & Acknowledgements

Many thanks for valuable feedback and advice from:

'drawing of different postures'