Why does my site look zoomed out on mobile?

If a page is missing the viewport meta tag, mobile browsers render it at a desktop width, usually around 980 pixels, and then scale that canvas down to fit the phone. Text becomes tiny, tap targets shrink, and users have to pinch-zoom to read anything. One viewport element in the head corrects it.

Why this matters

Web.dev is blunt about the requirement: pages optimized for a variety of devices must include a meta viewport tag in the head of the document. Without it, the mobile browser assumes a wide layout viewport, lays the page out at that width, and shrinks everything to fit the physical screen. The result is a page that technically loads but is unusable without zoom, which is exactly the kind of page Google's mobile-first indexing evaluates and demotes in practice. Fixed-width images and columns that exceed the viewport also introduce horizontal scrolling. Because the tag is easy to forget on a new template or a static export, it is one of the most common defects a scanner will catch on an otherwise finished product. It is also worth checking that the tag is served on every template, not only the home page, since a single leftover static route can reintroduce the zoomed-out rendering for that path.

How to fix it

Add the viewport tag inside the document head, before any content. The two values that matter are width=device-width and initial-scale=1.

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

Setting width=device-width tells the page to match the screen width in device-independent pixels, so the layout reflows to the actual device instead of a 980-pixel canvas. Adding initial-scale=1 establishes a 1:1 relationship between CSS pixels and device-independent pixels regardless of orientation, which lets the page use the full landscape width. Web.dev notes that a comma should separate the attributes so older browsers parse them correctly. It also cautions against minimum-scale, maximum-scale, and user-scalable, because those values can prevent zooming and create accessibility problems, so leave them out. If you later need a fixed-width embed, wrap it in a container that scrolls rather than shrinking the whole viewport.

How to verify the fix

Confirm the tag is present in the served HTML. The command below prints the viewport line if it exists.

curl -s https://example.com | grep -i 'name="viewport"'

To test the actual behavior, open DevTools, toggle device mode, and select a phone preset. The layout should reflow to the viewport rather than shrink a wide canvas, and the page should be readable at 1x without pinch-zooming. Some browsers keep the layout width constant when the device rotates to landscape, so test both orientations before you call the fix done.

Related issues