Device Mode & Mobile Emulation

Get started with device presets

To jump-start your debugging process, device mode has a variety of emulation presets. Quickly emulate a particular device by selecting a model from the preset dropdown.

Each preset automatically configures device emulation in the following ways:

• Specifies the UA string for requests.
• Sets the device resolution and pixel ratio.
• Enables touch emulation (if applicable).
• Emulates mobile scrollbar overlays and meta viewport.
• Autosizes (boosts) text for pages without a defined viewport.

Tips: Toggle the screen resolution emulator on and off using the Emulate screen resolution checkbox. Alternate between portrait and landscape views by clicking the Swap dimensions icon. Select the Fit checkbox to ensure that the emulated screen remains fully visible inside your browser viewport, shrinking to fit if necessary. (This setting is for convenience and does not emulate the device differently.)

Customize the screen settings

To get more granular control over the screen emulator, you can tune the resolution settings below the device preset dropdown.

To emulate a custom screen size, manually set the CSS pixel dimensions of the device in the width and height fields.

If you want to emulate a Retina device from a non-Retina machine or vice versa, adjust the Device pixel ratio field. The device pixel ratio (DPR) is the ratio between logical pixels and physical pixels. Devices with Retina displays, such as the iPhone 5, have higher pixel density than standard devices, which can affect the sharpness and size of visual content.

Some examples of DPR-sensitivity on the web are:

• CSS media queries such as @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { ... }
• CSS image-set rules.
• The srcset attribute on images.
• The window.devicePixelRatio property.

Note: If you have a native Retina display, you'll notice that low dpi assets look pixelated while higher-dpi assets are sharp. To simulate this effect on a standard display, set the DPR to 2 and scale the viewport by zooming. A 2x asset will continue to look sharp, while a 1x one will look pixelated.

Save custom presets

Save custom emulations as presets so that you can easily return to them later.

To save your current screen settings as a preset, open the DevTools emulation drawer by clicking the More overrides icon in the top right corner of the browser viewport.

In the device pane of the emulation drawer, click Save as and give your preset a name.

Now you can quickly select your custom screen emulation from the device preset dropdown.

Tip: The emulation drawer contains the same controls as the main device mode interface, plus some extras (media type and sensor controls).

Preview screen styles

Click a media query bar to adjust the emulator resolution and preview styles for the targeted screen sizes.

View CSS

Right-click a bar to view where the media query is defined in CSS and jump to the definition in source code.

Tip: As you work with the media query inspector, you might find that you don't always want to use the mobile emulator. To turn off mobile emulation without exiting device mode, click the Reset all overrides icon and refresh the page.

Preview styles for more media types

The media query inspector targets styles intended for screens. If you want to preview styles for other media types, such as print, you can do so in the media pane of the emulation drawer.

Open the DevTools emulation drawer by clicking the More overrides icon in the top right corner of the browser viewport. Then, select Media in the emulation drawer.

Select the CSS media checkbox, and choose a media type from the dropdown list.

Trigger touch events

The touch screen emulator lets you accurately test touch events and sequences as if you were using a touch-enabled device.

Enable touch emulation by selecting the Emulate touch screen checkbox in the sensors pane of the emulation drawer.

When you interact with the emulated viewport, the cursor changes into a fingertip-sized circle and touch events (such as touchstart, touchmove, and touchend) fire as they would on a mobile device.

Note: To trigger elem.ontouch* handlers, you must run Chrome with the ‑‑touch‑events command line flag. Touch emulation currently does not trigger these handlers by default.

Because mouse events can still fire on touch devices, the touch emulator does not disable mouse events entirely.

Override geolocation data

Unlike desktops, mobile devices commonly use GPS hardware to detect location. In device mode, you can simulate geolocation coordinates to use with the Geolocation API.

Enable the geolocation emulator by selecting the Emulate geolocation coordinates checkbox in the sensors pane of the emulation drawer.

You can use this emulator to override position values for navigator.geolocation, as well as simulate cases when geolocation data is unavailable.

Tip: Try out the geolocation emulator using this maps demo.

Simulate device orientation

If you need to test accelerometer data used with the Orientation API, you can simulate the data using the accelerometer emulator.

Enable the accelerometer emulator by selecting the Accelerometer checkbox in the sensors pane of the emulation drawer.

You can manipulate the following orientation parameters:

α

Rotation around the z-axis.

β

Left-to-right tilt.

γ

Front-to-back tilt.

You can also click and drag the model accelerometer to the desired orientation.

Tip: Try out the accelerometer emulator using this device orientation demo.