Emulate dual-screen and foldable devices in Microsoft Edge DevTools

In Microsoft Edge version 89 or later, you may emulate the following dual-screen and foldable devices.

Emulate the devices and toggle between the following postures.

  • Single-screen or folded posture
  • Dual-screen or unfolded posture

Turn on experimental Web Platform APIs and use the CSS media screen-spanning feature and JavaScript getWindowSegments API to enhance your website (or app) for dual-screen and foldable devices.

Emulate Surface Duo in Microsoft Edge

Turn on experimental APIs

To use the CSS media screen-spanning feature and JavaScript getWindowSegments API, turn on the Experimental Web Platform features flag in Microsoft Edge. Complete the following steps.

  1. Navigate to edge://flags.
  2. In the Search flags textbox, enter Experimental Web Platform features, choose the Experimental Web Platform features flag, and change Disabled to Enabled.
  3. Restart Microsoft Edge.

Turn on the Experimental Web Platform features flag

Note

If you are using CSS media queries or the JavaScript Windows Segment Enumeration API to enhance your website or app for the Surface Duo, you must also turn on the Experimental Web Platform features flag in the Android Microsoft Edge app on your Surface Duo device.

If the Experimental Web Platform features flag is turned on in desktop Microsoft Edge and turned off in the Android Microsoft Edge app, the behavior of your website or app in the Surface Duo emulator in desktop Microsoft Edge does not match with the Android Microsoft Edge app on Surface Duo. Ensure that the flags match across Android and desktop Microsoft Edge to successfully use the Surface Duo emulator in desktop Microsoft Edge.

Test on foldable and dual-screen devices

When you emulate the Surface Duo in a dual-screen posture in Microsoft Edge, the seam (the space between the two screens) is drawn over your website or app.

The emulated display matches the way your website (or app) renders in the Microsoft Edge Android app while running on Surface Duo. You may have to update your website (or app) to display better along the seam. For more information about adapting your website (or app) to the seam, navigate to How to work with the seam.

The Device Toolbar has additional features to help you test your website or app in multiple postures and orientations. Choose Rotate (Rotate) to rotate the viewport to landscape orientation. Combine the feature with Span (Span) to toggle between single-screen or folded and dual-screen or unfolded postures. Together, the features allow you to test your website or app in all four possible postures and orientations.

Matrix of postures and orientations for dual-screen and foldable devices

The Experimental Web Platform features (ExperimentalApis) icon displays the state of the Experimental Web Platform features flag. If the flag is turned on, the icon is highlighted. If the flag is turned off, the icon is not highlighted. To turn on (or off) the flag, either choose the icon or navigate to edge://flags and toggle the flag.

Note

The following is a list of current known issues.

Additional Resources

Here are additional resources that may help you enhance your website (or app) for dual-screen devices.

Getting in touch with the Microsoft Edge DevTools team

Use the following options to discuss the new features and changes in the post, or anything else related to DevTools.

  • Send your feedback using the Send Feedback icon or select Alt+Shift+I (Windows, Linux) or Option+Shift+I (macOS) in DevTools.
  • Tweet at @EdgeDevTools.
  • Submit a suggestion to The Web We Want.
  • To file bugs about this article, use the following Feedback section.

The Send Feedback icon in the Microsoft Edge DevTools