kweri

Field Guide

Viewport and Mobile

The viewport meta tag tells a phone to render your page at the screen's real width instead of pretending to be a shrunken desktop — without it, your site loads zoomed-out and barely usable on mobile.

Why it matters for your site

Most web traffic is now on phones. A page missing its viewport tag loads as a tiny, zoomed-out desktop layout that visitors have to pinch and drag just to read. Most won't bother — they'll leave before they've understood what you offer.

Google uses mobile-first indexing: it predominantly crawls and ranks the mobile version of your site, not the desktop one. If your mobile experience is broken, that's the version deciding your search ranking — a broken phone layout is a search problem, not just a usability one.

Even with the tag in place, mobile usability depends on the layout adapting — text that reflows, tap targets big enough for a thumb, no horizontal scrolling. The viewport tag is the prerequisite that makes responsive design possible in the first place.

How to check it yourself

  1. Open your site on an actual phone, or use your browser's device toolbar (in Chrome: F12, then the device-toolbar icon) to simulate one. If the page appears zoomed-out and you have to pinch to read it, the viewport tag is likely missing.
  2. View the page source and look for <meta name="viewport"> in the <head>. The standard value is content="width=device-width, initial-scale=1".
  3. While testing on a narrow screen, check that you never have to scroll sideways to read content, and that buttons and links are comfortably tappable with a thumb.
  4. The Kweri audit flags a missing viewport meta tag in the Technical SEO section of your report.

Technical detail

The tag is <meta name="viewport" content="width=device-width, initial-scale=1"> in the page's <head>. 'width=device-width' matches the layout to the device's actual screen width; 'initial-scale=1' sets the starting zoom to 100%.

Mobile-first indexing means Googlebot crawls primarily as a mobile device. Content, structured data, and metadata that exist only on your desktop layout may not be seen — parity between mobile and desktop matters.

The viewport tag enables responsive design but doesn't create it. The layout itself must adapt through fluid widths, flexible images, and CSS media queries; the tag simply stops the browser from faking a desktop-width canvas.

For the responsive design and viewport specification, see web.dev — Responsive web design basics →

Related

Thumb Zone

Primary actions should sit where the thumb naturally reaches on a phone held one-handed.

Touch Target Sizing

Tap targets need to be big enough, and spaced enough, to hit reliably with a finger.

See Viewport and Mobile on your own site

Run a free Kweri audit — a plain-English review of your site’s speed, accessibility, SEO and design, ranked by what to fix first. No login, no jargon.

Run a free audit →