Viewport meta tag is properly configured

Missing or misconfigured viewport metadata causes mobile browsers to render your page at desktop width, then shrink it — text becomes unreadable without zooming, tap targets collapse, and Google's mobile-first index penalizes the page in rankings. Worse, setting user-scalable=no with maximum-scale=1 violates WCAG 2.2 SC 1.4.4 (Resize Text), which requires users to be able to scale text to 200% without loss of content. Sites with pinch-to-zoom disabled routinely fail WCAG audits and see elevated bounce rates from mobile visitors.

Add or fix the viewport meta tag in your root layout. In Next.js App Router, export a viewport object from app/layout.tsx rather than placing a raw <meta> tag:

// app/layout.tsx
export const viewport = {
  width: 'device-width',
  initialScale: 1,
}

Remove any userScalable: false or maximumScale: 1 values — these block pinch-to-zoom and will fail WCAG 2.2 SC 1.4.4. If you are on Pages Router, set the tag in _document.tsx inside <Head>.