How to emulate mobile devices in Chrome

Anybody that is interested in web design in some fashion knows that websites can be viewed in many different flavors. From desktops to tablets to mobile phones, each view is different. And of course, I’m sure most of you don’t own every single mobile device to test what your website will look like on it.

Luckily, Google has a not-so-well-known feature built into the latest version of Chrome browser. It’s called Mobile Emulation, which allows you to view through your desktop browser, what any website will look like on a mobile device.

Setting it up mobile emulation in Chrome is a breeze, and once you do, you can view any website in as if you were viewing on an iOS device, Amazon device, Google device, Samsung, Sony, and more.

Here’s how you do it

When viewing a website, in Chrome go to the Menu bar (top right of window) and go to Tools and select Developer Tools. You can also do a keyboard shortcut to get here: Ctrl+Shift+I

In the upper right hand corner of Developer Tools, click on the Open Console menu. It should look like this:

emulate mobile device

After clicking the Open Console, you will see the console show on the bottom with tabs. Click on the Emulation tab, like this:

emulate mobile device

From here it should be smooth sailing. Just select the device you want to emulate, and then click Emulate. On the left of the screen capture above, you also see Device, Screen, User Agent, and Sensors. You may need to click on Screen and change the Device Pixel Ratio to “1”.

That’s it, you can now view emulate mobile devices in Chrome. You can always change the type of device depending on what your testing. To stop emulation, simply click on the Reset button. Or, just close Developer Tools and give the website page a refresh.

Special thanks to SitePoint where I picked up these helpful tips! Have a tip of your own? Post them in the comments below.