Device Posture API

Intro

The Device Posture API allows web applications to request and be notified of changes of the posture of a device.

The polyfill allows you to emulate this behavior on devices that do not have folding capabilities. It helps you visualize how the content responds to the different angle and posture configurations.

How to use it

There are two ways of using the polyfill:

  1. Including the polyfill (sfold-polyfill.js) directly into your code.
  2. Using the polyfill settings web component found here.

Demo

As an example, the web component has been added to this page. You can change the values with the provided GUI and see how the circle reacts accordingly.

@media Query
(device-posture: folded-over) { applies to tent modes }
(device-posture: folded) { applies to laptop/book postures}
(device-posture: continous) { applies to flat, tablet, or even seamless curved displays }

Polyfill Web Component