Adding a Viewport Meta Tag

To ensure your website scales properly on smartphones and tablets, you should include a meta tag specifically designed for the "viewport" inside your document's head.

The viewport is the user's visible area of a web page. Before smartphones and tablets existed, web pages were designed only for desktop screens, and had a fixed design and a fixed size.

When mobile browsers first appeared, they took these desktop-sized websites and zoomed out so they would fit on their tiny screens. This allowed the whole page to be seen, but made the text unreadably small, forcing users to constantly pinch and zoom. The viewport meta tag was introduced to fix this exact problem.

The Standard Viewport Tag

To tell the mobile browser not to zoom out, you should place the following meta tag anywhere within the head section of your HTML document:

Understanding the Attributes

There are two key parts to the content attribute in this standard tag:

• width=device-width: This part sets the width of the page to follow the screen-width of the device. This means a phone with a 400px wide screen will render the page as if it were 400px wide, instead of a zoomed-out 980px desktop view.
• initial-scale=1: This sets the initial zoom level when the page is first loaded by the browser, preventing the browser from zooming in or out artificially.

Full Working Example

Below is a complete HTML document structure showing exactly where the viewport tag belongs. Without this tag, any CSS media queries you write for responsive design won't work correctly on actual mobile device, because the device will trick the browser into thinking it has a much wider screen than it actually does.