# Viewport meta tag is present and correctly configured
- **Pattern:** `ab-001914` (`mobile-responsiveness.viewport.viewport-meta`)
- **Severity:** critical
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-001914
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-001914)
## Why it matters
Without a viewport meta tag, mobile browsers render the page at a hardcoded desktop width of roughly 980px and scale it down to fit the screen. Text becomes unreadably small, tap targets shrink below usable size, and pinch-zoom becomes the only way to interact. Search engines treat this as a mobile-unfriendly signal, demoting rankings under Google's mobile-first indexing. More than half of global traffic is mobile — a missing viewport tag breaks the primary user experience and kills SEO.
## Severity rationale
Critical because a single missing line breaks the mobile experience for every visitor and tanks mobile search rankings.
## Remediation
Add the viewport meta tag to your root HTML head, or in Next.js App Router export `generateViewport` from your root `app/layout.tsx`. The two required properties are `width=device-width` and `initial-scale=1`.
```tsx
export function generateViewport() {
return { width: 'device-width', initialScale: 1 }
}
```
## Detection
- **ID:** `viewport-meta`
- **Severity:** `critical`
- **What to look for:** Check the root layout or HTML template for a `` tag. Verify the content attribute includes `width=device-width` and `initial-scale=1`. Watch for `user-scalable=no` or `maximum-scale=1` which prevent user zooming (this is a separate accessibility concern but should be noted).
- **Pass criteria:** Before evaluating, extract and quote the exact viewport meta tag content string from the root layout or HTML template. Count all viewport meta tag declarations across all layout files. At least 1 declaration must exist with both required properties: `width=device-width` and `initial-scale=1`. The tag must contain at least 2 required properties. Report: "X viewport meta declarations found across Y layout files." Do NOT pass when the tag is present but missing either `width=device-width` or `initial-scale=1`.
- **Fail criteria:** No viewport meta tag found in any layout file, or the tag is missing `width=device-width` or `initial-scale=1`. Report even on pass: "Viewport meta content: '[exact content string]'."
- **Skip (N/A) when:** Never — every web project that renders HTML needs a viewport meta tag.
- **Detail on fail:** Describe specifically what is wrong. For example: `"No viewport meta tag found in root layout — mobile browsers will render at desktop width by default"` or `"Viewport meta tag present but missing initial-scale=1 — only 1 of 2 required properties found"`.
- **Cross-reference:** Disabling user zoom (`user-scalable=no`) is an accessibility violation — see the Accessibility Fundamentals Audit for WCAG 1.4.4 guidance.
- **Remediation:** Without a correctly configured viewport meta tag, mobile browsers render the page at a desktop width (typically 980px) and then scale it down, making text unreadably small. Add this to your root ``:
```html
```
In Next.js App Router, set this in your root `layout.tsx`:
```tsx
export function generateViewport() {
return { width: 'device-width', initialScale: 1 }
}
```
---
## External references
- wcag 1.4.4
Taxons: user-experience
HTML version: https://auditbuffet.com/patterns/ab-001914