probeo

How to add a proper viewport meta tag for mobile responsiveness?

viewport-meta-missing page

The issue

Without a viewport meta tag, a phone renders the page at desktop width and shrinks it to fit. Text is too small to read without zooming, tap targets are tiny, and the responsive layout you built never appears. Google indexes the mobile version of a page, so that is also the version it judges.

The cause is that mobile browsers assume a wide layout viewport, 980 CSS pixels in Safari on iOS, unless the page says otherwise. CSS media queries then see that width, not the phone’s.

Scope

Each page is checked on its own, but the tag belongs in the shared template, and every page should carry the same one.

How to check you have it

  • In probeo: the page reports Missing <meta name="viewport" ...> for mobile responsiveness.
  • By hand: view the page source and look in <head> for <meta name="viewport" content="width=device-width, initial-scale=1">. Open the page on a phone: if it looks like a shrunken desktop page, the tag is missing or wrong.
  • With a tool: your browser’s device emulation in DevTools shows the page at phone widths.

The fix

Add <meta name="viewport" content="width=device-width, initial-scale=1"> to the <head> of the shared template.

width=device-width sets the layout width to the device’s, so media queries respond to the real screen. initial-scale=1 loads the page at normal size. Leave zoom alone: maximum-scale=1 and user-scalable=no stop people enlarging text, which fails WCAG 2.1’s Resize Text criterion (1.4.4).

Done when: every page carries the standard viewport tag, the layout adapts on a phone, and the check above comes back clean.

Do not

  • Do not use a fixed pixel width in place of device-width.
  • Do not restrict zooming with maximum-scale or user-scalable=no.
  • Do not vary the viewport settings between pages without a specific reason.
  • Do not set initial-scale to anything other than 1 without a clear purpose.

FAQ

Why use width=device-width instead of a specific pixel width?

Screens vary widely in width, and a fixed value is wrong on most of them. device-width matches whatever device is showing the page.

Should maximum-scale or user-scalable=no be used to prevent zooming?

No. People with low vision rely on zoom, and blocking it fails WCAG. If a layout breaks when zoomed, fix the layout.

What is the difference between initial-scale and maximum-scale?

initial-scale sets the zoom level when the page loads; 1 is actual size. maximum-scale caps how far people can zoom in. Set the first and leave out the second.

Can viewport settings differ between pages on the same site?

They can, but rarely should. One setting in the template keeps behavior predictable; embedded widgets are the usual exception.

How does the viewport meta tag interact with responsive CSS media queries?

Media queries test the layout viewport’s width. Without the tag, a phone reports a desktop-sized layout viewport, so mobile breakpoints never match. With width=device-width, they match the real screen.

What happens on desktop browsers when viewport tags are present?

Nothing visible. Desktop browsers already size the layout to the window, so the tag only changes behavior on mobile browsers.

Which product detects this

Probeo checks this on every page of your site as part of Site Clarity. This page explains one instance; the product tells you every page that has it.