How to See What a Website Looks like on a Mobile Phone, Using Google Chrome

Lets say you’re looking at a website and you’d like to know what it would look like if you were on your phone.

Well, you could just pop your phone out of your pocket (you mean it isn’t already?) and load it up, but this can also be done right in Google’s Chrome browser.

This is useful for things like inspecting elements, playing with different sizes (maybe you don’t own every version of the iPhone and want to see what it looks like on various screen sizes), and just to impress your nerdy friends who think they know everything because they’re always winning at Carcassonne.

Here’s how to do it:

1. Open Google Chrome

It’s not just vital for this exercise, it’s flat out the best browser out there at the moment. If you don’t have it, you can download it here.

2. Load up the site you want.

Let’s use MadeinPGH.com as an example.

Here’s what it looks like on a desktop browser:

3. Inspect element

Right click anywhere on the page, now, and choose Inspect Element. Like so:

Next, click the little phone icon there near the top left of the new window that is displayed.

You can move the dock over to the right, if it’s being shown at the bottom of the window, by clicking like so:

Give the browser a refresh, just in case the website employs any techniques that measure screen width, etc. and need to be checked again.

And voila, this is what you’ll end up with when you’re all done.

Of course, this is just an approximation and no emulator, not even Chrome, will do the job 100% every time. If you really need to know what your site looks like on all devices, I recommend Cross Browser Testing. Tell ’em I sent you!

Update: Since I’ve written this, I find that Safari (on a Mac at least), is much better at approximating the little differences between actual iPhone browsers and what Chrome, Safari, etc. do when you just shrink a window down significantly.

Up Next: Adding Social Share Buttons to any WordPress Page, No Plugin, No External Javascript