How to Emulate Dual-Screen and Foldable Devices in Microsoft Edge DevTools

The proliferation of dual-screen laptops and foldable mobile devices (such as the Microsoft Surface Duo, Lenovo ThinkPad X1 Fold, and Samsung Galaxy Z Fold series) has introduced new interface paradigms for web designers. Unlike traditional flat viewports, foldable hardware features dynamic form factors: devices can operate in single-screen phone mode, fold into a laptop or tent posture, or span across two distinct display panels separated by a physical hinge or flexible display crease.

To assist developers in testing dual-screen layouts, Microsoft Edge DevTools includes specialized dual-screen and foldable emulation tools, CSS viewport segment simulation, and device posture sensors.

Activating Device Emulation in Microsoft Edge

To begin testing responsive mobile and foldable layouts:

1. Open Microsoft Edge and press F12 (or Ctrl + Shift + I on Windows, Command + Option + I on macOS) to open DevTools.
2. Click the Toggle device emulation icon in the top-left corner of DevTools (or press Ctrl + Shift + M).
3. In the device dropdown menu located in the emulation toolbar, select Surface Duo or Samsung Galaxy Fold.

If foldable devices do not appear in the default list, click Edit… at the bottom of the device menu, check the boxes for Surface Duo and other foldable targets, and click Done.

Toggling Dual-Screen Spanning Mode

When a foldable device preset is active, Microsoft Edge displays a dedicated dual-screen toolbar icon directly next to the orientation toggle:

1. Locate the Toggle dual-screen mode icon (represented by two adjoining screens with a central seam).
2. Click the icon to expand the viewport across both displays. Edge simulates the physical display seam or hinge mask, rendering a visual dividing bar down the centre of your web page.
3. Click the Rotate button to switch between vertical split (book mode) and horizontal split (laptop mode).

Testing CSS Viewport Segments and Spanning Queries

The W3C CSS Viewport Segments specification allows web applications to detect and adapt to multi-screen hardware. Microsoft Edge DevTools natively evaluates these media queries during dual-screen emulation.

1. Media Features for Screen Division

Modern CSS uses horizontal-viewport-segments and vertical-viewport-segments to detect when content spans across multiple screens:

/* Styles applied when the device is opened like a book (side-by-side screens) */
@media (horizontal-viewport-segments: 2) {
  .app-container {
    display: flex;
    flex-direction: row;
  }
}

/* Styles applied when the device is opened like a laptop (stacked screens) */
@media (vertical-viewport-segments: 2) {
  .app-container {
    display: flex;
    flex-direction: column;
  }
}

2. Avoiding Hinge Occlusion with Environment Variables

To prevent text or interactive controls from being obscured behind a physical hinge or crease, query the CSS env() variables provided by the browser engine:

@media (horizontal-viewport-segments: 2) {
  .sidebar {
    /* Set sidebar width exactly to the first display segment */
    width: env(viewport-segment-width 0 0);
  }

  .main-content {
    /* Offset main content to begin immediately after the hinge */
    margin-left: calc(env(viewport-segment-left 1 0) - env(viewport-segment-width 0 0));
    width: env(viewport-segment-width 1 0);
  }
}

As you toggle spanning mode on and off in Edge DevTools, the rendering engine recalculates these environment coordinates in real time.

Simulating Folding Angles and Device Posture in the Sensors Tool

Foldable devices report their physical posture (e.g., continuous flat, folded, book mode, tent mode) via the Device Posture API. You can simulate various physical angles using Edge DevTools Sensors:

1. In DevTools, press Esc to open the drawer panel at the bottom.
2. Click the three dots (More tools) menu on the drawer toolbar and select Sensors.
3. Locate the Device posture section.
4. Select from supported posture states:
   • Continuous: The device is fully flat (180-degree posture).
   • Folded: The device is angled (e.g., 90-degree laptop posture).

You can verify that your JavaScript posture event listeners trigger correctly:

if ('devicePosture' in navigator) {
  navigator.devicePosture.addEventListener('change', () => {
    console.log('Current Posture:', navigator.devicePosture.type);
  });
}

Validating Ergonomics and Interactive Zones

While emulating dual-screen devices, verify critical usability aspects:

• Form Controls: Ensure submit buttons, inputs, and modal dialogs do not span across the central hinge dividing line.
• Reading Comfort: Split long paragraphs into independent columns or separate cards matching viewport segment boundaries.
• Touch Targets: Verify that primary navigation controls remain accessible within one-handed thumb reach along outer screen margins.