The Viewport Meta Tag

Learn why mobile browsers zoom out by default and how the viewport meta tag fixes it.

Step 1 of 4

Why mobile browsers zoom out your page

When smartphones first appeared, most websites were designed for desktop screens — typically around 960px wide. Mobile browsers had a clever workaround: they pretended the screen was 980px wide (even though the phone was only 320px), rendered the page at that width, and then zoomed it out to fit the tiny screen. The result? You could see the whole page, but everything was microscopic. Text was unreadable without pinch-to-zoom. Buttons were impossible to tap. It was like looking at a poster through the wrong end of a telescope. This is still what happens today if you create an HTML page without a viewport meta tag. The browser assumes your page was designed for a 980px desktop and shrinks everything to fit. The viewport meta tag tells the browser: "Stop pretending. Use the actual screen width." It's a single line of HTML that transforms the mobile experience from unusable to properly sized.

Think of it this way: Imagine you have a large wall map. If you try to display it on a small tablet, one approach is to shrink the entire map until it fits — but then you can't read any of the text. The better approach is to show just the section of the map that fits the screen at full size, and let the user scroll to see more. The viewport meta tag tells the browser to take the second approach: show content at real size, sized to the actual screen width.

Web Standard

The viewport meta tag was invented by Apple for the original iPhone in 2007. It was so useful that every other mobile browser adopted it. While it's not part of a formal W3C specification, it is a de facto web standard supported by every modern browser. The CSS specification later introduced @viewport, but it was never widely implemented and was eventually abandoned in favor of the meta tag approach.

Learn more on MDN

HTMLMDN: Viewport meta tag

HTMLREAD ONLY

PREVIEW