The viewport meta element is what turns a regular website page into a responsive page, and it's also one of the number one reason for StackOverflow questions on why their media queries are not working.
What is the viewport element?
The viewport is a short tag that is included in the head of your HTML document that tells the browser how the page should be rendered. See the Best Practice example below
<meta name="viewport" content="width=device-width,initial-scale=1">
This is telling the browser to set the width of the content to the width of the device itself, and to scale that content to 1 on load.
Why do we need it?
When the iPhone was originally released Apple needed it to be suitable to consume websites the way they existed at the time. There was no way an internet browsing device was going to be successful if the websites that were being viewed were too big and the experience was poor.
To solve this problem Apple applied a neat trick within the safari mobile browser to tell the webpage that the content width was 960px ā the targeted width for many websites at the time the first iPhone was released.
This meant that the website would then zoom so that it was easier to consume on the iPhone.
Fast forward to Ethans article and now we need to reset this bad practice because we were now developing sites to respond the width of the viewport (and on the iPhone it was being told the width was 960px).
What are the viewport options?
There are many options we can include in the content section of the meta viewport.
width
. Sets the width of the layout viewport. In our case we set this to the "device-width" which overrides Apples default 960px.initial-scale
. Sets the initial zoom of the page AND the width of the layout viewport. We set this to 1 which is the default view, but you can easily increase this number (not recommended).minimum-scale
. Sets the minimum zoom level (i.e. how much the user can zoom out). This takes the control away from the user and something we never recommend.maximum-scale
. Sets the maximum zoom level (i.e. how much the user can zoom in). Again this is not recommended because it takes away control from the user.height
. Is supposed to set the height of the layout viewport. It is not supported anywhere.... so not really sure it's included.user-scalable
. When set tono
prevents the user from zooming. This is an abomination that MUST NOT be used. Even if you think you know what's best for the user, you don't, leave it alone.
Further Reading
I highly recommend going DEEP into the QuirksMode article
Before you leave
I know, "another newsletter pitch" - but hear me out. Most JavaScript newsletters are terrible. When's the last time you actually looked forward to getting one? Even worse, when's the last time you actually read one rather than just skim it?
We wanted to change that, which is why we created Bytes. The goal was to create a JavaScript newsletter that was both educational and entertaining. 101,890 subscribers and an almost 50% weekly open rate later, it looks like we did it.
Delivered to 101,890 developers every Monday

Sdu
@sduduzo_g
This is the first ever newsletter that I open a music playlist for and maximize my browser window just to read it in peace. Kudos to @uidotdev for great weekly content.

Brandon Bayer
@flybayer
The Bytes newsletter is a work of art! It's the only dev newsletter I'm subscribed too. They somehow take semi boring stuff and infuse it with just the right amount of comedy to make you chuckle.

John Hawley
@johnhawly
Bytes has been my favorite newsletter since its inception. It's my favorite thing I look forward to on Mondays. Goes great with a hot cup of coffee!

Garrett Green
@garrettgreen
I subscribe to A LOT of dev (especially JS/TS/Node) newsletters and Bytes by @uidotdev is always such a welcomed, enjoyable change of pace to most (funny, lighthearted, etc) but still comprehensive/useful.

Muhammad
@mhashim6_
Literally the only newsletter Iām waiting for every week.

Grayson Hicks
@graysonhicks
Bytes is the developer newsletter I most look forward to each week. Great balance of content and context! Thanks @uidotdev.

Mitchell Wright
@mitchellbwright
I know I've said it before, but @tylermcginnis doesn't miss with the Bytes email. If you're a developer, you really need to subscribe

Ali Spittel
@aspittel
Can I just say that I giggle every time I get the @uidotdev email each week? You should definitely subscribe.

Chris Finn
@thefinnomenon
Every JavaScript programmer should be subscribed to the newsletter from @uidotdev. Not only do they manage to succinctly cover the hot news in the JavaScript world for the week but it they manage to add a refreshing humor to it all.