Viewport meta tag is present and correctly configured

ab-001914 · mobile-responsiveness.viewport.viewport-meta

Severity: criticalactive

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.

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 <meta name="viewport"> 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 <head>:
```
<meta name="viewport" content="width=device-width, initial-scale=1" />
```
In Next.js App Router, set this in your root layout.tsx:
```
export function generateViewport() {
  return { width: 'device-width', initialScale: 1 }
}
```

External references

wcag:2.2 · 1.4.4 — Resize Text

Taxons

user-experience

History

2026-04-18·v1.0.0·Initial import from mobile-responsiveness·automated

Why it matters

Detection

ID: viewport-meta
Severity: critical
What to look for: Check the root layout or HTML template for a <meta name="viewport"> 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 <head>:
```
<meta name="viewport" content="width=device-width, initial-scale=1" />
```
In Next.js App Router, set this in your root layout.tsx:
```
export function generateViewport() {
  return { width: 'device-width', initialScale: 1 }
}
```