Device Posture API

W3C Working Draft

This version:
Latest published version:
Latest editor's draft:
Implementation report:
Previous version:
Diego González (Microsoft, formerly on behalf of Samsung)
Kenneth Rohde Christiansen (Intel Corporation)
GitHub w3c/device-posture
File an issue
Commit history
Pull requests
Additional resources
'Fold State' initial explainer & key scenarios


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

Status of This Document

This section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current W3C publications and the latest revision of this technical report can be found in the W3C technical reports index at

Implementors need to be aware that this specification is extremely unstable. Implementors who are not taking part in the discussions will find the specification changing out from under them in incompatible ways. Vendors interested in implementing this specification before it eventually reaches the Candidate Recommendation phase should subscribe to the repository on GitHub and take part in the discussions.

This document was published by the Devices and Sensors Working Group as a Working Draft. This document is intended to become a W3C Recommendation.

GitHub Issues are preferred for discussion of this specification.

Publication as a Working Draft does not imply endorsement by the W3C Membership.

This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress.

This document was produced by a group operating under the W3C Patent Policy. W3C maintains a public list of any patent disclosures made in connection with the deliverables of the group; that page also includes instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains Essential Claim(s) must disclose the information in accordance with section 6 of the W3C Patent Policy.

This document is governed by the 15 September 2020 W3C Process Document.

1. Introduction

New types of mobile devices are appearing that have some sort of folding capabilities around the screen. Hence, when the device folds, it physically can be different form factor. The main interest in knowing the posture is to enable new user experiences with responsive design.

Among the described "folding" devices, there are mainly two different physical form factors: devices with a single flexible screen (seamless), and devices with two screens (with seam). They can both fold around a hinge, and the current specification applies to both types. It should be clarified as well that both seamless and (devices) with seam can be of different dimension ranging from mobile and tablets to laptop sizes. It should also be noted that different devices will have different default orientations (portrait or landscape), and that the fold might happen in a vertical or horizontal way.

drawing of different type of foldable devices

From enhancing the usability of a website by avoiding the area of a fold, to enabling innovative use cases for the web, knowing the posture can help developers tailor their content to different devices.

Content can be consumed and browsed even when the device is not flat, in which case the developer might want to provide a different layout for it depending on the posture state in which the device is being used.

2. Internal slots

The following internal slots are added to the Document interface.

Internal slot Description
[[CurrentPosture]] The current posture.

3. Extensions to the Navigator interface

The [HTML] specification defines the Navigator interface, which this specification extends:

WebIDL[SecureContext, Exposed=(Window)]
partial interface Navigator {
  [SameObject] readonly attribute DevicePosture devicePosture;

4. The DevicePosture interface

WebIDL[SecureContext, Exposed=(Window)]
interface DevicePosture : EventTarget {
  readonly attribute DevicePostureType type;
  attribute EventHandler onchange;

enum DevicePostureType {

4.1 The type attribute: Get current device posture

When getting the type attribute, the user agent MUST return the value of responsible document's internal slot [[CurrentPosture]].

4.2 The onchange attribute: Handle posture changes

The onchange attribute is an event handler whose corresponding event handler event type is "change".

5. Posture types

This specification defines the following posture values:

  1. drawing of no-fold mode No-Fold is the posture of a device without a hinge. This is the expected value for devices that do not fold.
  2. drawing of laptop mode Laptop posture indicates that the device is being used as a traditional laptop, meaning one screen is placed on a more or less horizontal surface with a screen angle between 180 to 0 degrees.
  3. drawing of flat mode Flat posture indicates that one screen is being placed on a more or less horizontal surface with a screen angle around 180 degrees.
  4. drawing of tent mode Tent posture indicates that the edges of both screens are placed on a horizontal surface but with an angle > 180 degrees.
  5. drawing of tablet mode Tablet posture is when the device can turn around on its hinge all the way to have the screen back to back. The angle is considered to be around 360 degrees.
  6. drawing of book mode Book posture is when the device is used between around 50 and 160 degrees. It is generally used while being held on (not on a surface).

In the API, the posture values are represented by the DevicePostureType enum values.

6. Device Posture Media Queries

The 'device-posture' media feature

The device-posture media feature represents, via a CSS media query [MEDIAQ], the posture of the device. This media feature applies to the top-level browsing context and any child browsing contexts. Child browsing contexts reflect the posture of the top-level browsing context.

no-fold | laptop | flat | tent | tablet | book
Applies to:
visual media types
Accepts min/max prefixes:

A user agent MUST reflect the applied posture of the web application via a CSS media query [MEDIAQ].

7. Reading the posture

All documents have an internal slot [[CurrentPosture]], which should be initialized when the document is created, otherwise they MUST be initialized the first time they are accessed and before their value is read. The user agent MUST update the device posture information of the document to initialize it.

For a given document, the current posture is derived from the current hinge angle and the current screen orientation, and potentially other implementation-specific signals.

These tables are non-normative.

Posture values table

The values are approximations and might differ per device. For instance, a device might not yield exactly 180° when laying flat, but instead values ranging from 175° to 185°. Device makers SHOULD make sure that the physical device postures map correctly to the postures defined by this specification.

Some devices might also lack one or more of the postures due to physical constraints or device design, in which case the device SHOULD make sure that all combinations of angles and device orientation (which can be locked by [SCREEN-ORIENTATION] and host OS), as well as device specific signals, maps into one of the defined postures.

An illustration on how posture values are derived from the orientation of the fold The posture values table shows how the posture values are derived depending on the orientation of the fold:

Horizontal Fold

drawing of a device with a vertical fold

Devices with a horizontal fold are the ones for which in their main form factor, the folding occurs from side to side, across the screen(s).

The posture values table for devices with a horizontal fold
Current posture Current screen orientation Current hinge angle value
Laptop "portrait-primary" | "portrait-secondary" [0° - 140°[
Flat any orientation [140° - 185°[
Tent any orientation [185° - 335°[
Tablet any orientation [335° - 360°]
Book "landscape-primary" | "landscape-secondary" [0° - 140°[

Vertical Fold

drawing of a device with a horizontal fold

Devices with a vertical fold are the ones for which in their main form factor, the folding occurs from top to bottom, across the screen(s).

The posture values table for devices with a vertical fold
Current posture Current screen orientation Current hinge angle value
Laptop "landscape-primary" | "landscape-secondary" [0° - 140°[
Flat any orientation [140° - 185°[
Tent any orientation [185° - 335°[
Tablet any orientation [335° - 360°]
Book "portrait-primary" | "portrait-secondary" [0° - 140°[

8. Algorithms

8.1 Updating the device posture information

The steps to update the device posture information of a document are as follows:

  1. Update the document.[[CurrentPosture]] given current hinge angle value, current screen orientation, as well as potential implementation-specific signals, according to posture values table.

8.2 Device Posture change

Whenever the screen(s) fold angle, screen orientation or device specific signals change, the user agent MUST run the following steps as part of the next animation frame task:

  1. Let browsing contexts be the list of the descendant browsing contexts of the top-level browsing context's document.
  2. for each context in browsing contexts, run the following sub-steps:
    1. Let document be the context's active document.
    2. If document is not visible per [PAGE-VISIBILITY], abort these steps.
    3. Update the device posture information of document.
    4. Fire an event named change at document's Window.navigator.devicePosture object.

Whenever a document becomes visible per [PAGE-VISIBILITY], in other words after the now visible algorithm is run, the user agent MUST run the following substeps as part of the next animation frame task:

  1. Let document be the document in question.
  2. Let posture be the document.[[CurrentPosture]].
  3. Update the device posture information of the document.
  4. If posture is different from the document.[[CurrentPosture]], run the following sub-steps:
    1. Fire an event named change at the document's Window.navigator.devicePosture object.

Developers need to be aware that a Window.navigator.devicePosture object from a document that is not visible, as per [PAGE-VISIBILITY], will not receive an orientation change event. This is to prevent unnecessary changes to layout, etc. in the non-visible web application.

Issue 1
This section could be improved if the [PAGE-VISIBILITY] specification had a hook for when the document becomes visible and hidden. PR 54.

9. Security and Privacy considerations

The Device Posture API exposes a posture determined from the hinge angle value and other sensors.

Typical sensor readings are sent at a constant frequency to whomever is listening to its readings. However the fold angle only communicates its value when the hinge is manipulated by the user. Variations in the angle’s readings and posture calculation, as well as event dispatching frequency offer a possibility of fingerprinting to identify users. User agents may reduce this risk by limiting or coalescing events when exposing this information to web developers. Users don’t constantly adjust the angle, so the fold angle value is changing in bursts: the events may be dispatched at a very low frequency most of the time and fire at a high frequency when the device is being opened or closed. In order for the events to be dispatched, the content must be on the foreground and visible to the user. Because the API does not directly expose the raw angle values, but a more abstract posture with fewer possible states, fingerprinting possibilities are more limited.

If the same code using the API can be used simultaneously in different window contexts on the same device it may be possible for that code to correlate the user across those two contexts, creating unanticipated tracking mechanisms.

9.1 Types of security and privacy threats

This section is non-normative.

9.2 Mitigation Strategies

This section is non-normative.

This section gives a high-level presentation of some of the mitigation strategies specified in the normative sections of this specification.

9.2.1 Secure Context

Posture value readings are explicitly flagged by the Secure Contexts specification as a high-value target for network attackers. Thus all interfaces defined by this specification or extension specifications are only available within a secure context.

9.2.2 Focused Area

Posture value readings are only available for active documents whose origin is the same origin-domain with the currently focused area document.

This is done in order to mitigate the risk of a skimming attack against the browsing context containing an element which has gained focus, for example when the user carries out an in-game purchase using a third party payment service from within an iframe.

9.2.3 Visibility State

Posture value change events are only fired for active documents whose visibility state is "visible", and polling the value while that is not the case, will return a stale value as the value is only updated while the visibility state is "visible" or just changed to "visible".

10. Examples

This section is non-normative.

Example 1: Posture data

This is a simple use case of the posture being printed on the console.

Example 1: React to poster change
navigator.devicePosture.addEventListener("change", () => {
  console.log(`The current posture is: ${navigator.devicePosture.type}!`);

Example 2: device-posture

The device is being used for a video call web service. It can be folded into the laptop posture to enable a hands-free when placed on a surface. The UA detects the posture and the UI is enhanced. Similar examples can be drafted for content to adapt to any posture. See the explainer for other key scenarios.

An illustration of a video call web service that uses the screen-fold-posture media feature
Example 2: Adapting UI to posture
@media (device-posture: laptop) and (spanning: single-fold-horizontal){
  body {
    display: flex;
    flex-flow: column nowrap;

  .videocall-area, .videocall-controls  {
    flex: 1 1 env(fold-bottom);

Example 3: Feature detection of device-posture media feature

As one of the valid device-posture values will always be true, you can use the following snippet to detect whether a user agent supports the media feature:

Example 3: Feature detect the device-posture
@media (device-posture) {
  /*The browser supports device-posture feature*/
For more information about media features in a boolean context please refer to Evaluating Media Features in a Boolean Context.

11. Dependencies

The following concepts and interfaces are defined in [SCREEN-ORIENTATION]: current screen orientation as represented by the OrientationType enum.

The following is defined in [MEDIAQ]: Evaluating Media Features in a Boolean Context.

The following concepts and interfaces are defined in [HTML]: list of the descendant browsing contexts.

The following is defined in [PAGE-VISIBILITY]: now visible algorithm.

The following is used but not defined in [FULLSCREEN]: animation frame task.

Issue 2
This should now be updated since the animation frame task issue is recently resolved and the timing is now defined.

12. Conformance

As well as sections marked as non-normative, all authoring guidelines, diagrams, examples, and notes in this specification are non-normative. Everything else in this specification is normative.

The key words MUST and SHOULD in this document are to be interpreted as described in BCP 14 [RFC2119] [RFC8174] when, and only when, they appear in all capitals, as shown here.

This specification defines conformance criteria for a single product: a user agent that implements the interfaces that it contains.

A. IDL Index

WebIDL[SecureContext, Exposed=(Window)]
partial interface Navigator {
  [SameObject] readonly attribute DevicePosture devicePosture;

[SecureContext, Exposed=(Window)]
interface DevicePosture : EventTarget {
  readonly attribute DevicePostureType type;
  attribute EventHandler onchange;

enum DevicePostureType {

B. Acknowledgments

This section is non-normative.

We would like to offer our sincere thanks to Daniel Appelquist, Alexis Menard, Jo Balletti, and Michael Blix for their contributions to this work.

C. References

C.1 Normative references

DOM Standard. Anne van Kesteren. WHATWG. Living Standard. URL:
Fullscreen API Standard. Philip Jägenstedt. WHATWG. Living Standard. URL:
HTML Standard. Anne van Kesteren; Domenic Denicola; Ian Hickson; Philip Jägenstedt; Simon Pieters. WHATWG. Living Standard. URL:
Infra Standard. Anne van Kesteren; Domenic Denicola. WHATWG. Living Standard. URL:
Media Queries Level 4. Florian Rivoal; Tab Atkins Jr.. W3C. 21 July 2020. W3C Candidate Recommendation. URL:
Page Visibility (Second Edition). Jatinder Mann; Arvind Jain. W3C. 29 October 2013. W3C Recommendation. URL:
Key words for use in RFCs to Indicate Requirement Levels. S. Bradner. IETF. March 1997. Best Current Practice. URL:
Ambiguity of Uppercase vs Lowercase in RFC 2119 Key Words. B. Leiba. IETF. May 2017. Best Current Practice. URL:
The Screen Orientation API. Mounir Lamouri; Marcos Caceres; Johanna Herman. W3C. 19 October 2020. W3C Working Draft. URL:
Web IDL. Boris Zbarsky. W3C. 15 December 2016. W3C Editor's Draft. URL: