Question
I want to preview what a webpage looks like on a mobile device using Google Chrome on my desktop computer. How do I do this?
Answer
- Open the webpage in Chrome that you want to preview.
- Open Developer Tools by either:
- right-click anywhere on the page and select Inspect
- press F12 on Windows or Cmd+Opt+I on Mac
- select the three vertical dots (⋮) in the top right corner of Chrome, select More Tools, then select Developer Tools
- Select the Toggle Device Toolbar icon to enter mobile emulation mode, if necessary. This icon looks like a phone and a tablet, and it's located near the top-left of the Developer Tools panel.
You can preview different device types by selecting the Dimensions: drop-down menu that appears at the top center of the page preview. You can choose from various mobile devices to simulate how the page will look on that device. You may need to refresh the page to view the mobile version with the selected device's dimensions.
Close the Developer Tools (also identified as DevTools) by selecting the X in the corner of the panel, or close its window, to exit mobile preview mode.