The viewport meta tag: one line that fixes tiny mobile pages, without blocking zoom

Updated Oct 27, 2026 · Pewterkit Guides

Use <meta name="viewport" content="width=device-width, initial-scale=1"> in your page's <head>. Without a viewport tag, many phones render the page on a wide virtual screen and shrink it, so everything looks tiny. Leave out user-scalable=no and keep any maximum-scale at 2 or more: blocking zoom stops people with low vision from enlarging your text.

What a missing viewport tag does

MDN: "Some mobile devices and other narrow screens render pages in a virtual window or viewport that is wider than the screen, and then shrink the rendered result down to fit the screen size." Its example is a 640px screen rendering a 980px virtual viewport. Your responsive CSS breakpoints for 640px or 480px then "will never be used".

width=device-width sets the viewport to "the physical size of the device screen in CSS pixels", which is what your mobile layout expects.

Why blocking zoom is a problem

Some templates ship this:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  • MDN: setting user-scalable to no "prevents people experiencing low vision conditions from being able to read and understand page content", and "WCAG requires a minimum of 2× scaling; however, the best practice is to enable a 5× zoom."
  • The axe rule meta-viewport, "Zooming and scaling must not be disabled", flags user-scalable=no and any maximum-scale below 2. It maps to WCAG 1.4.4 Resize Text (Level AA).
  • MDN also notes that for these zoom keys "Browser settings can ignore this rule, and iOS10+ ignores it by default", so the line doesn't reliably stop zoom anyway.

The fix

<meta name="viewport" content="width=device-width, initial-scale=1">
  • Vite, Lovable, Bolt: the tag lives in index.html at the project root.
  • Plain HTML: first lines of <head>, next to <meta charset="utf-8">.
  • Other frameworks: search the project for user-scalable and maximum-scale and remove them from the viewport content.

What Pewterkit Check looks for

A free check reads your homepage's <meta name="viewport">. It flags a missing width=device-width (the "tiny on phones" problem), and in the accessibility kit flags user-scalable=no or a maximum-scale below 2.

FAQ

What is the correct viewport meta tag?

<meta name="viewport" content="width=device-width, initial-scale=1">. MDN's recommended minimum is width=device-width; initial-scale=1 sets the starting zoom.

Does user-scalable=no still work on iPhone?

MDN says iOS 10 and later ignore it by default, so it mostly adds an accessibility problem on other browsers without locking zoom on iPhones.

Why does my site look zoomed out on phones?

Usually there's no viewport tag, so the phone lays the page out on a wide virtual screen and shrinks it. Add the tag above.

Is maximum-scale=1 an accessibility problem?

Yes. Axe flags any maximum-scale below 2 because WCAG 1.4.4 expects that "text can be resized without assistive technology up to 200 percent without loss of content or functionality".

Sources

  1. MDN: meta name="viewport" — read 27 Oct 2026: virtual viewport, device-width, zoom accessibility note, iOS 10+ behavior
  2. W3C WAI: Understanding Success Criterion 1.4.4 Resize Text — read 27 Oct 2026: text resizable to 200 percent, Level AA
  3. axe rule meta-viewport: Zooming and scaling must not be disabled (Deque University) — read 27 Oct 2026: user-scalable=no, maximum-scale below 2, WCAG 1.4.4

How this page was made: drafted with AI from the sources listed, reviewed by Pewterkit. Docs checked Oct 27, 2026. Spotted something out of date? Tell us.

Related guides