Test on Mobile Devices with Chrome

The purpose of this guide is to teach you, how to use the Device Mode to test how your website looks and performs on a mobile device using Google Chrome as a browser.

Limitations

With Device Mode you simulate the mobile user experience on your computer. This means, there are some aspects that the browser isn't able to simulate precisely. There can therefore be a few corner cases where the rendering will be different in the simulation mode versus on a real phone.

Open the inspector in Chrome

First, right-click an empty area on your website and select Inspect from the drop-down.

 

Simulate a mobile viewport

Click Toggle Device Toolbar    to open the UI that enables you to simulate a mobile viewport.

Figure 1. The Device Toolbar

By default, the Device Toolbar opens in Responsive Viewport Mode.  

 

Mobile Device Viewport Mode

To simulate the dimensions of a specific mobile device, select the device from the Device list, which is on the top bar of your viewport mode.

Figure 2. The Device list

Rotate the viewport to landscape orientation

Click Rotate  to rotate the viewport to landscape orientation.

 

Figure 3. Landscape orientation