The viewport meta tag: what it does and the one line you need

Updated October 17, 2026 · Covers: The site is not mobile-friendly The page width is fixed

What it means

The viewport meta tag is a single line in the <head> of your page that tells mobile browsers how wide the layout should be and how much to zoom in when the page first opens. This is the version almost every site should use:

<meta name="viewport" content="width=device-width, initial-scale=1">

MobileCheck reports two problems related to this tag:

• Viewport missing – the page has no <meta name="viewport"> at all.
• Fixed viewport width – the tag exists but sets a number, such as width=1024, instead of width=device-width.

Both lead to the same result: the phone lays the page out wider than its screen and then shrinks the whole thing to fit.

Why it matters

Mobile browsers were built to cope with a web designed for desktop monitors. When a page doesn't say how wide it wants to be, Safari on iPhone and Chrome on Android assume it is a desktop page and lay it out on a virtual canvas about 980 CSS pixels wide. A typical phone is 360–430 CSS pixels wide, so the browser scales that 980px layout down to less than half its size.

The page technically fits, but everything is tiny. 16px body text ends up looking like 6–7px text. Buttons become specks. Visitors have to pinch-zoom and pan around to read a single paragraph. Your responsive CSS doesn't help either: media queries such as @media (max-width: 600px) never match, because the browser reports a layout width of 980px, not the real screen width.

A fixed width like width=1024 or width=600 does the same thing with a different number. The page is laid out at that width and scaled to fit, so text is smaller than you designed it and your mobile styles may never apply.

This is also the first thing to fix for search. Google uses mobile-first indexing, meaning it crawls and evaluates the mobile version of your pages. A page without a viewport tag is, by any practical definition, not mobile-friendly.

What each attribute does

The content attribute is a comma-separated list of settings. Here is what each one controls:

Why width=device-width and initial-scale=1 together

width=device-width is the important part: it makes the layout viewport match the screen, so a 390px-wide iPhone gets a 390px layout and your media queries work as written. initial-scale=1 sets the starting zoom so the page isn't scaled up or down on load. Using both is the long-standing, widely recommended combination because it gives consistent results across browsers, including when the phone is rotated to landscape and the page has to reflow to the new width.

The tag on its own does not make a site responsive. It only stops the browser from pretending to be a desktop. If your layout uses fixed pixel widths, it will now stick out past the edge of the screen instead of being shrunk. That is progress, because the problem is now visible and fixable, and the guide to content wider than the screen covers the next step.

How MobileCheck finds it

For every device in your report, MobileCheck loads the page in a real browser engine with that device's actual CSS viewport: WebKit for iPhones and iPads, Chromium for Android phones and tablets. It reads the viewport tag and measures how much the browser had to scale the page down to fit.

• If there is no <meta name="viewport">, the report flags viewport missing and shows how many times smaller the page was drawn, for example "scaled down 2.5×". This is one of the heaviest penalties in the score, because it affects every piece of text on the page.
• If the tag is present but has no width=device-width and the page ends up scaled down, the report flags fixed viewport width and shows the tag it found.

When either problem is present, measured text sizes reflect the scaled-down rendering, so you will usually see small-text warnings at the same time. Fix the viewport first; many of those warnings disappear with it.

How to fix it

Add the tag inside <head>, ideally near the top, right after the charset declaration:

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Your page</title>
</head>

If you already have a tag with a fixed width, replace the whole content value rather than adding a second tag. If your tag contains user-scalable=no or maximum-scale=1, remove those too; the guide to disabled zoom explains why.

A few platform notes:

• WordPress: almost all current themes print this tag already. If yours doesn't, add it to the theme's header template or with a header-code plugin, and make sure you don't end up with two tags.
• Site builders and frameworks: most generate the tag for you. Check the generated HTML (view source) rather than the template, because plugins and layout files sometimes override it.
• Old fixed-width sites: adding the tag will expose the fixed layout. Add CSS such as max-width: 100% on images and containers and introduce media queries for narrow screens, or the page will scroll sideways.

If you want edge-to-edge design on phones with notches, add viewport-fit=cover and keep content clear of the rounded corners with safe-area padding:

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

header {
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}

How to check the fix

View the page source on your live site and confirm there is exactly one viewport tag with width=device-width. Then run the free mobile-friendly check again: the viewport problem should be gone and the screenshots should show text at its real size. To scroll and tap through the page yourself, open it in the live mobile preview.

Test on both engines. Chrome DevTools device mode always renders with Chromium, even when you pick an iPhone, so it can't show you Safari-specific behaviour. MobileCheck runs iPhones on WebKit, so you see what Safari users see. If you are unsure which screen widths to test, the list of common mobile viewport sizes is a good starting point.

Related guides