Definition

The viewport meta tag is a `<meta name="viewport">` element placed in the page head that controls the layout viewport — the area the browser uses when calculating CSS pixel widths on mobile devices.

Without a viewport meta tag, mobile browsers render pages at a fixed desktop width (often 980px) and scale them down, which produces tiny text and broken layouts on small screens. Setting `width=device-width, initial-scale=1` instructs the browser to match the layout width to the device width and render at 1:1 zoom, which is a prerequisite for responsive design and for being treated as mobile-friendly.

Examples

• Standard responsive declaration

  A site adds `<meta name="viewport" content="width=device-width, initial-scale=1">` to every page. Mobile browsers stop applying a desktop-width fallback and the responsive CSS breakpoints fire as intended.

• Missing viewport on a mobile audit

  A Lighthouse mobile audit flags a page without a viewport meta tag. The page loads zoomed-out on phones, tap targets fall under the recommended size, and the page fails the mobile-friendly check.

Sources

• web.dev — Learn Responsive Design: viewport meta element
• MDN — meta name="viewport"

Related terms

• Mobile-Friendly
  A property of a web page that renders legibly and usably on phones without horizontal scrolling, tiny text, or close-packed tap targets.
• Responsive Design
  A design approach that uses flexible layouts, media queries, and a viewport meta tag so a single HTML page adapts to any screen size.
• Mobile-First Indexing
  Google's practice of using the mobile version of a site as the primary basis for indexing and ranking.
• Core Web Vitals
  A set of three Google metrics that measure real-world page experience: loading speed, interactivity and visual stability.

Where QueryCatch uses this

• SEO Audit
• Page Optimisation