Dual-screen web experiences

Important

This article describes functionality and guidance that is in public preview and may be substantially modified before it's generally available. Microsoft makes no warranties, express or implied, with respect to the information provided here.

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 Window Segments Enumeration 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)