Viewport meta tag is present

Without <meta name="viewport" content="width=device-width">, mobile browsers render the page at desktop width (typically 980px) and scale it down — text becomes unreadable, tap targets become too small, and users must pinch-zoom to navigate. WCAG 2.2 SC 1.4.4 (Resize Text) requires content to remain usable when scaled to 200%, and section 508 requires equivalent mobile access. Setting user-scalable=no or maximum-scale=1 blocks pinch-to-zoom entirely, which is an accessibility violation that fails WCAG 1.4.4 — a separate and more serious defect than a missing viewport tag.

Add the viewport meta tag to your HTML <head>. This is the canonical correct value:

<meta name="viewport" content="width=device-width, initial-scale=1">

In Next.js App Router, set it in app/layout.tsx:

export const metadata = {
  viewport: 'width=device-width, initial-scale=1',
};

Or directly in the <html> template's <head>. Do NOT include maximum-scale=1 or user-scalable=no — these prevent pinch-to-zoom and violate WCAG 2.2 SC 1.4.4. Vite, Create React App, and most framework starters include this tag by default in index.html.