The purpose of the viewport meta tag is narrow and important: it tells a mobile browser how wide to make the area it lays the page out in. Get it right and a responsive design behaves as designed. Leave it out and your carefully built mobile layout may never appear, because the browser assumes it is looking at a desktop page.
Most modern themes and frameworks include it by default, which is why it rarely gets thought about. But it still turns up missing on hand-built templates, landing page tools and old sections of large sites, and it is regularly copied with extra settings that do more harm than good.
The purpose of the viewport meta tag
MDN’s reference on the viewport meta tag describes its value as something that “gives hints about how the viewport should be sized.” The word “hints” matters: the browser takes the instruction into account, but it remains a request about layout, not a command.
The problem it solves dates from the first smartphones. Most websites were built for desktop screens, so mobile browsers learned to pretend they were wider than they were. According to MDN, without the tag a device may render the page “with a virtual viewport of 980px, and then it will be shrunk down to fit”. MDN’s own example is a screen 640px wide.
That shrinking is what you see on an old site on a phone: tiny text, a whole desktop layout squeezed into a narrow screen, and the need to pinch and pan to read anything. Your media queries do not fire as intended either, because as far as the browser is concerned the screen is 980px wide.
How to add a viewport meta tag
The recommended form, as given by MDN, is a single line in the <head> of every page:
width=device-width tells the browser to make the layout viewport match the width of the device’s screen, so a responsive layout gets the real width to work with. Many templates add an initial zoom level alongside it, which is harmless. The essential part is the width.
It belongs in the shared head template, not on individual pages. If your site uses several templates, such as a separate one for landing pages or an older blog section, check each of them. A tag missing from one template is easy to miss because the rest of the site looks fine.
In a CMS, the theme usually writes it, so look in the header template rather than the page editor. In a JavaScript framework, it is normally set once in the root layout or document file. Either way, it should be in the HTML the server sends, not injected later by a script, so the browser knows the width before it starts laying out the page.
Adding the tag only helps if the page is actually responsive. On a fixed-width desktop layout, telling the browser to use the device width can make things worse, because the content now overflows a narrow viewport instead of being shrunk. The tag and a responsive stylesheet go together.
Common viewport settings compared
These are the variations you are most likely to find in an existing site’s <head>, and what each one means in practice:
| What is in the head | Effect | Verdict |
|---|---|---|
| No viewport tag | May render with “a virtual viewport of 980px”, then shrink to fit | Add the tag |
width=device-width | Layout width matches the device | MDN’s recommended form |
user-scalable=no | Stops people zooming | Remove it; MDN warns against it |
A restrictive maximum-scale | Limits how far people can zoom | Remove it; the same warning applies |
Never disable zoom
The settings that do harm are the ones that stop people zooming. They were often added to make a site feel more like an app, or to prevent the browser zooming in on form fields. MDN’s warning is direct:
“Disabling zooming capabilities by setting user-scalable to a value of no prevents people experiencing low vision conditions from being able to read and understand page content. Additionally, WCAG requires a minimum of 2× scaling; however, the best practice is to enable a 5× zoom.”
The same applies to a restrictive maximum-scale, which achieves the same result less obviously. If either appears in your head template, take it out. If a form field zooms awkwardly when tapped, fix the input’s font size in the stylesheet rather than taking zoom away from everyone.
Why the viewport meta tag matters for SEO
Google indexes the mobile version of your pages. Under mobile-first indexing, the page Google evaluates is the one a smartphone crawler sees, so a page that renders as a shrunken desktop layout on a phone is the version being judged.
The tag is not a ranking factor in its own right, and adding it will not move a page up. What it does is make the mobile experience you designed actually reach the browser. Text that cannot be read without zooming, and tap targets crammed together, are usability problems for the people who arrive from search, whatever any crawler concludes. Visitors who land on an unreadable page tend to leave, and that loss is real whether or not it ever shows up in a ranking.
It also interacts with the layout metrics in Core Web Vitals. A page that loads at one width and then adjusts can shift content around as it settles; our guide to cumulative layout shift covers what causes that movement and how it is measured. For the broader picture of speed and mobile experience, see page speed and SEO.
How to check your viewport setup
The quickest check is to view the page source and search for viewport. You are looking for exactly one tag, containing width=device-width, and no user-scalable=no or restrictive maximum-scale. Duplicate tags, often from a theme and a plugin both adding one, are worth tidying even when they agree.
Then test on real devices or a browser’s device emulation. Load the page at a narrow width, confirm the text is readable without zooming, and then pinch to zoom and make sure it works. Repeat for each template, not just the homepage, because the missing tag is usually on the page type nobody checked.
One limitation is worth stating. The viewport tag is a hint about sizing, not a guarantee of a good mobile page. A correct tag on a layout that was never designed for small screens still produces a poor experience. Treat it as a prerequisite that lets responsive design work, not as the mobile fix itself.
Frequently asked questions
What is the viewport meta tag used for?
It tells mobile browsers how to size the area the page is laid out in. MDN describes it as giving hints about how the viewport should be sized.
What is the correct viewport meta tag?
MDN recommends <meta name="viewport" content="width=device-width" /> in the head of every page.
What happens without a viewport meta tag?
A mobile browser may render the page with a virtual viewport of 980px and then shrink it to fit the screen, leaving text tiny and layouts squeezed.
Should I use user-scalable=no?
No. MDN warns it prevents people with low vision from reading the page, and notes WCAG requires a minimum of 2× scaling.
The takeaway Put one viewport tag with width=device-width in every template, and remove any setting that stops people zooming.
