Microsoft has introduced two new Web APIs that will help web developers practically put content in a browser window that spans multiple display regions like that of the Surface Duo – dual screen device.
What’s New
- CSS screen-spanning media feature and a set of environment variables to describe the geometry of the fold.
- JavaScript window segments enumeration API, a companion API to the CSS primitives, useful when working with non-DOM targets like Canvas2d and WebGL.
Microsoft has also discussed a number of aspects regarding the dual screen experience which includes the foldable device class, transitioning from traditional contiguous screens to dual-screens and foldables, detecting display regions, calculating display regions geometry and how Microsoft enhanced its own email client app – Microsoft Outlook – for dual-screen and foldable experience.
How to get started
Starting in Microsoft Edge 86, web developers can use Microsoft Edge DevTools to emulate dual-screen & foldable devices on Windows and Mac desktop platforms.
Alternatively, you can download and install the new Surface Duo emulator preview (version 2020.806.1 or newer) to test and debug using the built-in Edge browser after enabling experimental platform features flag.
To learn more, head to this page
