How to Emulate Dual-Screen and Foldable Devices in Google Chrome DevTools

As foldable smartphones and dual-screen tablets gain mainstream adoption, web designers must ensure applications adapt seamlessly across expanding screen real estate. Designing for foldable form factors presents unique challenges: content can be displayed across a single screen, spanned across dual viewports, or interrupted by a physical hardware hinge or screen crease.

Google Chrome DevTools includes dedicated foldable and dual-screen emulation features built into its Device Mode toolbar. With these tools, frontend developers can simulate continuous folding postures, test seam masking, and debug modern CSS Viewport Segments API rules without requiring physical hardware. This complements capabilities to emulate mobile viewports and touch events and customise user-agent strings in DevTools.

Enabling Device Mode in Google Chrome

To access the foldable hardware emulation controls, first open Chrome DevTools in Device Mode:

1. Open Google Chrome and navigate to the webpage or local development server you wish to test.
2. Press F12 (Windows/Linux) or Cmd + Option + I (macOS) to open DevTools.
3. Click the Toggle device toolbar icon in the top-left corner of DevTools (or press Ctrl + Shift + M on Windows or Cmd + Shift + M on macOS).
4. The viewport shrinks to simulate a mobile device frame surrounded by dimensions and zoom controls.

Selecting Dual-Screen and Foldable Presets

Chrome DevTools includes built-in profiles for prominent foldable hardware:

1. Click the Dimensions dropdown menu at the top of the viewport toolbar.
2. Select a dual-screen or foldable preset, such as:
   • Surface Duo (dual-screen hardware hinge).
   • Samsung Galaxy Z Fold 5 (flexible continuous OLED display).
   • Asus Zenbook Fold.
3. If these options do not appear in your dropdown list, click Edit… at the bottom of the menu, tick the checkboxes for foldable devices, and click Close.

Toggling Foldable Spanning and Hinge Postures

When a foldable device profile is active, an additional Toggle dual-screen mode icon appears in the top toolbar:

1. Click the Toggle dual-screen mode button (represented by an icon showing two side-by-side screens with a crease between them).
2. The viewport will instantly expand into its spanned dual-screen state.
3. A visible translucent boundary appears down the centre (or across the middle in horizontal orientation), simulating the physical hinge mask or crease zone.
4. Click the Rotate button to switch between portrait and landscape orientations to test vertical and horizontal folding postures (book posture vs. laptop/tent posture).

Testing CSS Viewport Segments Media Queries

The W3C CSS Viewport Segments specification allows responsive websites to query how many distinct display segments exist and how they are aligned. You can write CSS rules that automatically place navigation sidebars on one screen and content feeds on the other:

/* Target devices spanned horizontally across two screens (e.g., book posture) */
@media (horizontal-viewport-segments: 2) {
  .sidebar {
    width: env(viewport-segment-width 0 0);
  }
  .main-content {
    margin-left: env(viewport-segment-width 0 0);
    width: env(viewport-segment-width 1 0);
  }
}

Using Chrome DevTools’ dual-screen toggle immediately triggers these media query breakpoints, letting you verify that layout containers avoid awkward splits across the central crease.

Using the Surface Duo / Foldable Posture Sensor Simulator

To test how interactive JavaScript web apps respond to angle changes (such as 90-degree laptop posture vs. 180-degree flat posture):

1. In DevTools, press Ctrl + Shift + P (Windows) or Cmd + Shift + P (macOS) to open the Command Menu.
2. Type Sensors and press Enter to open the Sensors panel in the bottom drawer.
3. In the Sensors drawer, locate the Device orientation and Fold posture controls.
4. Select postures such as Continuous (Flat), Folded, or Tent to fire corresponding window resize and posture change events in real time.

Frequently Asked Questions

Does Chrome DevTools simulate the physical pixel gap of hardware hinges?

Yes. On devices with physical split screens (like the Surface Duo), DevTools renders an authentic non-display hinge seam. Content spanned naively across the viewport will be masked by this gap, highlighting where layout redesign is needed.

Can I test foldable emulation on custom viewports?

Yes. In the dimensions toolbar, select Responsive mode, click the three-dot options menu on the right edge of the toolbar, and select Add device type and Show dual-screen mode to test bespoke dimensions.

Do viewport segments CSS environment variables work without flags?

Modern Chromium engines support CSS Viewport Segments natively. If testing experimental folding features, ensure the Experimental Web Platform features flag is enabled at chrome://flags/#enable-experimental-web-platform-features.