-
Book Overview & Buying
-
Table Of Contents
-
Feedback & Rating

Mastering CSS
By :

We are just about done with our responsive site. We have everything in place, except that we haven't actually tested it on a mobile device yet. In this section, let's test our design using Chrome's mobile device simulator and then look at and try to understand the viewport
meta tag.
One way to test on a mobile would be this – make your site live and test on an actual phone or tablet. An easier way to do a simple test on a phone (but possibly slightly less accurate) is to use Chrome's Device Simulator. Within DevTools there is a devices icon:
Once you click on that, you'll be able to choose a phone. We can see our site, but it doesn't look similar to when we just minimized our browser window to be about the size of a phone:
What's happening is that most mobile devices are going to try and shrink your website to fit on the phone, and then if your site isn't responsive, it will look like the desktop version, only much smaller. So...