How to Emulate Mobile Viewports and Touch Devices in Microsoft Edge DevTools

Designing modern, responsive websites requires thorough validation across various screen geometries, pixel densities, and input paradigms. While testing on physical hardware remains the gold standard, switching continuously between smartphones, tablets, and foldable hardware during active development is inefficient. Microsoft Edge incorporates comprehensive device emulation capabilities within its native Developer Tools suite. This feature allows web developers and designers to simulate handheld viewports, test responsive CSS media queries, emulate touch-screen events, and assess dual-screen ergonomics directly on a desktop display.

Opening Developer Tools and Enabling Device Emulation

To access the mobile emulation environment in Microsoft Edge, open the web page you wish to test and launch the Developer Tools console using any of the following methods:

• Press F12 or Ctrl + Shift + I on Windows and Linux (or Command + Option + I on macOS).
• Click the Settings and more menu (the three horizontal dots in the top right corner of Edge), navigate to More tools, and select Developer tools.
• Right-click anywhere on the active web page and select Inspect.

Once DevTools opens, locate the Toggle device emulation icon situated in the top left toolbar of the inspection pane (represented by a combined smartphone and tablet silhouette). Alternatively, press the global shortcut Ctrl + Shift + M (Command + Shift + M on macOS) to instantly transition the browser viewport into device simulation mode.

Navigating the Device Emulation Toolbar

Activating device emulation surrounds your web page with a dedicated simulation viewport accompanied by an interactive control bar along the top edge of the browser window. This toolbar provides precise control over display simulation parameters:

• Dimensions Drop-down: Switch between Responsive (allowing freeform dragging of viewport edges) and pre-configured device profiles, such as iPhone 14 Pro, Samsung Galaxy S20, iPad Air, and Microsoft Surface Pro.
• Resolution Inputs (Width × Height): Enter exact pixel dimensions (for example, 390 × 844) to verify layout integrity at targeted CSS viewport boundaries.
• Zoom Percentage: Adjust the scale of the emulated viewport (e.g. 50%, 75%, 100%, or Fit to window) to preview large tablet screens comfortably on compact laptop displays.
• Screen Orientation: Click the Rotate button to instantly alternate between portrait and landscape modes, testing dynamic CSS orientation rules and reflow behaviour.
• Device Pixel Ratio (DPR): Verify high-DPI assets, vector SVG rendering, and srcset image switching across standard 1x, Retina 2x, and ultra-dense 3x display profiles.

Testing Touch Gestures and Mouse Pointer Simulation

By default, triggering device emulation converts the desktop mouse cursor into a circular touch indicator. This transformation alters how browser DOM events fire:

• Clicking and dragging fires native touchstart, touchmove, and touchend events rather than traditional desktop mousedown and mousemove events.
• Scrolling within the viewport mimics mobile touch-flicking and inertia rather than stepped mouse-wheel ticks.
• Holding the Shift key while dragging enables multi-touch pinch-to-zoom gestures, allowing you to test mobile canvas zooming and image lightbox interactions seamlessly.

If your web application contains separate hover-specific CSS rules (such as dropdown navigation menus), you can toggle the touch pointer off by clicking the three-dot menu on the device toolbar and selecting Device type > Desktop while retaining mobile viewport pixel dimensions.

Emulating Foldable and Dual-Screen Hardware

Because Microsoft Edge is engineered with deep integration for hybrid and foldable hardware, its emulation environment includes specialised tooling for dual-screen devices such as the Surface Duo:

1. In the Dimensions menu, select Surface Duo.
2. A specialized Span icon appears in the device emulation toolbar (depicting two adjacent display panels separated by a hinge).
3. Click Toggle dual-screen mode to simulate an unfolded dual-screen orientation.

This mode activates CSS media features for foldables, such as screen-spanning: single-fold-vertical and environmental variables including env(fold-left), env(fold-width), and env(fold-top), allowing you to build responsive layouts that flow content seamlessly across hardware hinges.

Throttling Network and CPU Performance

Mobile device testing is incomplete without evaluating low-power hardware constraints. Real-world mobile users often experience intermittent 4G or 3G wireless links and throttled System-on-Chip (SoC) architectures.

Directly within the device emulation toolbar or by opening the Network conditions drawer (Ctrl + Shift + P, typing Network conditions, and pressing Enter), you can configure:

• Network Throttling: Simulate Fast 3G, Slow 3G, or custom latency/bandwidth limits to audit web font flashes (FOIT/FOUT) and lazy-loaded image thresholds.
• CPU Throttling: Apply a 4x or 6x CPU slowdown multiplier to evaluate heavy client-side JavaScript hydration and main-thread responsiveness under budget mobile processor limitations.

Adding Custom Device Profiles

If your testing workflow requires non-standard hardware specifications—such as industrial point-of-sale terminals or custom kiosk displays—you can define persistent custom devices:

1. Click the Dimensions dropdown on the emulation bar and select Edit… at the bottom of the list.
2. In the Devices settings panel, click Add custom device.
3. Input the Device Name, exact screen Width and Height, Device pixel ratio, and specify the User agent string and User agent client hints.
4. Click Add.

Your custom hardware profile immediately becomes selectable from the primary viewport menu, streamlining repetitive testing workflows across development sprints.