Mastering CSS

The anatomy of the viewport meta tag

Let's examine this meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">

Here, I've provided the name attribute with a value of viewport. Then, I have a content attribute with a couple of different things provided inside of it. The first thing is width=device-width. This basically means "please don't scale my page down on mobile devices because I'm handling that with media queries. Thanks!" The second thing is initial-scale=1.0, which basically says this – size it to exactly the width of the device and nothing more. Lastly, we have the minimum-scale=1.0. This helps when you rotate your phone so the website stays exactly the width of the device after the width ...