General Explanation of the Viewport

The viewport is the size of the window in which your website is displayed. The snippet of code above is how you override the default viewport settings on mobile devices.

When designing for desktop, the default viewport width is the size of your monitor (or smaller, if you choose to shrink your browser window). This is not the case when designing for a mobile device. Instead of setting the viewport equal to the size of a mobile device’s screen, most mobile browsers will by default display websites with much larger viewports.

For example, most mobile devices have a physical width of 480 pixels or less but have a default viewport of 800 pixels or more. This effectively squashes the website content onto the smaller screen so that it appears very tiny and difficult to read.

The reasoning behind this is that the larger viewport allows your mobile browser to display static, unresponsive websites that were not designed with different device widths in mind, without cutting off any content. The downside of this is that the content is usually quite tiny and impossible to see clearly without zooming in manually.

The Viewport Meta Tag

The viewport meta tag is used to override this default setting so that the viewport is the size of the device screen itself and is used in conjunction with media queries and other aspects of responsive design to make websites functional and aesthetically-pleasing on any size device.

The syntax you included in your question is correct. Properties of the meta viewport tag can be specified in the content attribute.

First up is the width property. width=device-width simply sets the default viewport width to whatever the width of your device’s screen is.

Another property you can specify is the initial scale. initial-scale=1.0 simply sets the degree to which the browser enlarges or zooms in on the website’s content. On most mobile browsers the scale is 1.0 (no zoom) by default anyway, so this portion is not considered strictly necessary.

Of course, if you are overriding the default viewport settings, you also need to use media queries to adjust your content for different sized displays. This is always recommended, as it makes your website much more user-friendly regardless of what device is being used.

I am Louis Cicalese, as they say.