Fix Meta Viewport Zoom Restrictions for Better Accessibility

Learn how to fix meta viewport zoom restrictions in Lighthouse accessibility audits
Harlan WiltonHarlan Wilton4 min read Published

Disabling zoom affects over 2.2 billion people globally with vision impairments who rely on screen magnification to read content.

What's Happening

Your page uses user-scalable="no" in the viewport meta tag or sets maximum-scale to a value less than 5. This prevents users with low vision from zooming in to read text, effectively locking them out of your content.

Diagnose

  1. Open DevTools (F12 or Cmd+Shift+I)
  2. Go to the Elements panel
  3. Find <meta name="viewport"> in the <head>
  4. Check for user-scalable=no or maximum-scale below 5

You can also run this in the Console:

document.querySelector('meta[name="viewport"]')?.content

Fix

1. Remove Zoom Restrictions Entirely

The cleanest fix removes all scaling restrictions:

<!-- Before -->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1">

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

2. Set Maximum Scale to 5 or Higher

If you must constrain zooming, allow at least 5x magnification:

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

Framework Examples

In Nuxt, configure the viewport in nuxt.config.ts:
export default defineNuxtConfig({
  app: {
    head: {
      meta: [
        { name: 'viewport', content: 'width=device-width, initial-scale=1' }
      ]
    }
  }
})

For React with Next.js, update pages/_document.js or use the Head component:

import Head from 'next/head'

export default function Page() {
  return (
    <Head>
      <meta name="viewport" content="width=device-width, initial-scale=1" />
    </Head>
  )
}

Verify the Fix

  1. Run Lighthouse again and check the accessibility section
  2. On mobile, pinch to zoom and verify it works
  3. Try zooming to at least 500% using browser zoom (Cmd/Ctrl + Plus)

Common Mistakes

  • Keeping user-scalable=no for "mobile UX" — Users with vision impairments need zoom more than you need to prevent accidental zooming. The browser handles this well.
  • Setting maximum-scale=1 to prevent layout shifts — Fix your responsive design instead. CSS touch-action can prevent unintended zoom on specific elements without breaking accessibility.
  • Using JavaScript to disable zoom — This is even worse than the meta tag. Some libraries add zoom prevention that you may not notice.

Related Issues

Meta viewport issues often appear alongside:

Test Your Entire Site

While fixing viewport issues on one page is straightforward, these problems often appear in templates affecting hundreds of pages. Unlighthouse scans your entire site with Google Lighthouse, finding every page with accessibility issues so you can fix the root cause once rather than playing whack-a-mole.

Related

Link Name

Learn how to fix links without discernible names in Lighthouse accessibility audits

Tabindex

Learn how to fix tabindex values greater than zero in Lighthouse accessibility audits