What is the viewport meta tag?

Viewport meta tag, explained

Without it, mobile browsers assume the page was designed for desktop. MDN explains that some mobile devices render pages in a virtual viewport wider than the screen, commonly 980 pixels, and then shrink the result to fit. Text becomes tiny, and your responsive CSS breakpoints never trigger because the browser thinks the screen is wide.

width=device-width sets the layout viewport to the device's width in CSS pixels. initial-scale=1 sets the starting zoom level. MDN notes that modern browsers no longer strictly need initial-scale to avoid unwanted zooming, but it's still standard in the recommended tag. Most frameworks, including Next.js, add a sensible viewport tag automatically, and you can override it through their metadata APIs.

Don't disable zoom. MDN warns that user-scalable=no and a low maximum-scale prevent people with low vision from reading the page, and that WCAG requires support for at least 2× zoom. Some sites add these to stop iOS zooming into form fields; the better fix is a 16px minimum font size on inputs.

For SEO, the viewport tag is part of being usable on mobile, and Google indexes the mobile version of your pages. Lighthouse flags a missing or invalid viewport tag, and it's one of the first things to check when a page looks shrunk on a phone. It's also a signal to check when a site's mobile layout looks fine in DevTools but broken on a real device.

Why it matters for founders

It's one line, and without it your carefully responsive design renders like a shrunken desktop page on every phone, which is where Google does its crawling.

Example

A landing page built from an old template looks tiny on phones. You add <meta name="viewport" content="width=device-width, initial-scale=1"> to the head, and the mobile breakpoints start working.

Common mistakes

• Missing the tag on templates outside the main framework, like old landing pages.
• Adding user-scalable=no or maximum-scale=1.
• Hardcoding a fixed width=1024.
• Two conflicting viewport tags from a theme and a plugin.