Dual-screen web experiences
Microsoft Edge, powered by Chromium, provides a powerful and compatible foundation for website and web app experiences across devices. This includes new dual-screen support when running on the Surface Duo.
New web standards for dual-screen layout: You can use CSS primitives for dual-screen layouts or the JavaScript viewport segments API to detect multiple displays and lay out web content across them.
Testing on Surface Duo or an emulator: While the new web standards are in preview, follow these instructions to enable dual-screen support on a Surface Duo or in the emulator.
Building and testing on the Desktop: You can also build and test dual-screen web experiences on the desktop with Edge or Chrome. Follow these instructions to enable the dual-screen developer tools.
Progressive Web Apps: PWAs are supported out of the box in the new Microsoft Edge, which can be installed directly from the browser on Android. PWAs will support the same dual-screen layout features and tools as the browser.
Additional resources
In Introduction to dual-screen devices, we outline several ways you can use existing features and techniques to make your app better on dual-screen devices. Use this existing documentation to learn more about implementing these features in web apps.
| Feature | For more info, see... |
|---|---|
| Responsive app layouts | The building blocks of responsive design (Mozilla) |
| Support a variety of inputs | PointerEvent (Mozilla) |
| Drag-and-drop | HTML Drag and Drop API (Mozilla) |
| Picture-in-picture for media | Picture-in-Picture (W3C) Picture-in-picture sample (Chrome) |