Missing Viewport Meta Tag Test

This page is intended to test detection of missing viewport meta tag.

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

What's wrong?

• Page lacks viewport meta tag
• Mobile browsers will render page at desktop width
• Users must pinch-zoom to read content
• Poor mobile user experience
• Fails Google mobile-friendly test
• Can hurt mobile search rankings

Expected Detection:

Check: mobile-friendly (automatic, detection not yet implemented)

Status: Future Issue

Detection logic would need to:

• Check for presence of <meta name="viewport"> in HTML head
• Verify viewport content includes width=device-width
• Optionally check for responsive CSS media queries
• Test actual rendering on mobile viewports

Symptoms of Missing Viewport:

• Page renders at 980px width on mobile devices
• Text appears tiny and unreadable
• Users must horizontal scroll
• Pinch-to-zoom required for reading
• Touch targets too small
• Google Search Console flags "Content wider than screen"

The Fix:

Add viewport meta tag to HTML head:

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

In Next.js metadata:

export const metadata = {
  viewport: {
    width: 'device-width',
    initialScale: 1,
    maximumScale: 5,  // Allow zoom for accessibility
  }
}

Viewport Best Practices:

• Always include width=device-width
• Set initial-scale=1 for proper initial zoom
• Avoid maximum-scale=1 or user-scalable=no (accessibility issue)
• Allow users to zoom for accessibility
• Test on real mobile devices
• Use responsive design with CSS media queries
• Validate with Google Mobile-Friendly Test

Common Viewport Values:

<!-- Standard (recommended) -->
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- With maximum zoom (good for accessibility) -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5">

<!-- Fixed width (not recommended) -->
<meta name="viewport" content="width=600">

<!-- Bad: Disables zoom (accessibility violation) -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Testing Mobile-Friendliness:

• Chrome DevTools mobile emulation
• Real device testing
• Google Mobile-Friendly Test
• Lighthouse mobile audits
• Browser window resize testing