Introducing Web APIs for Dual Screen and Foldable Devices

Google+ Pinterest LinkedIn Tumblr +

Enhancing our e-mail example app for dual-screen and foldable experiences

A side by side example showing a mail app with content occluded by a hinge gap, and with a layout that accounts for the hinge gap

Let’s put the CSS screen-spanning media feature and the fold geometry environment variables into practice and enhance the reader view of our email client:

Enumerating the window segments in JavaScript

When working with non-DOM targets like Canvas2d or WebGL, you can get the geometry of each display region using the new Window Segments Enumeration API.

getWindowSegments() is a method on the Window object that returns an array of 1 or more DOMRects representing the geometry and position of each display region.

The returned array is an immutable snapshot of the display regions’ state at the time the method was called. If the user transitions from a spanning state to a non-spanning state, or rotates the device, the window segments previously retrieved will be invalid.

Pages should listen to window resize event or orientationchange event to detect whether the browser was resized, or the device was rotated and retrieve the updated display regions.

There are no explicit methods to learn whether the fold posture is vertical or horizontal, as this information can easily calculated from the DOMRects returned:

Same applies for the fold-width, web developers can use information provided by getWindowSegments() to learn whether the window manager is masking content rendered behind the fold, and the fold width is greater than zero pixels, or not.

  Source Link


Leave A Reply