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.
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
You now know how to inspect your website with the simulation of a mobile device with Google Chrome.
If you need assistance on, how to preview your page from a mobile-perspective in another browser, please select your browser: