Fix zooming and scaling disabled

Fix 'zooming and scaling must not be disabled' Lighthouse audit. Remove user-scalable=no and maximum-scale=1 from your viewport meta tag.
Harlan WiltonHarlan Wilton4 min read Published

Disabling zoom blocks 2.2 billion people with vision impairments from reading your content. They rely on screen magnification to see what you've built.

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 locks out users with low vision who need to zoom to read text.

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.

Run this in the Console to check quickly:

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

Fix

1. Remove zoom restrictions entirely

Remove all scaling restrictions. This is the best approach.

<!-- 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

Allow at least 5x magnification if you must constrain zooming:

<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>
  )
}

SEO impact: mobile friendliness

The viewport meta tag is the gatekeeper for Mobile-First Indexing.

  • Mobile-friendly label: Without a proper viewport tag, mobile browsers render the page as a desktop site. Google's "Mobile-Friendly Test" will fail these pages, and they will be excluded from mobile search rankings.
  • CLS (Cumulative Layout Shift): Improper viewports cause layout shifts as the browser reflows text. This breaks your Core Web Vitals score.

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. The browser handles accidental zooming automatically.
  • Setting maximum-scale=1 to prevent layout shifts: Fix your responsive design. Never disable zoom to hide layout bugs. Use CSS touch-action if you need to prevent unintended zoom on specific elements.
  • Using JavaScript to disable zoom: Using JavaScript to disable zoom is even worse than the meta tag. Check your third-party libraries for hidden zoom prevention.

Related issues

Meta viewport issues often appear alongside:

Test your entire site

Viewport issues often hide in templates affecting hundreds of pages. Unlighthouse scans your entire site with Google Lighthouse to find every page with accessibility issues so you can fix the root cause once.

Related

All Accessibility IssuesAccessibility Overview

Link Name

Fix links without discernible names in Lighthouse accessibility audits

Tabindex

Fix tabindex values greater than zero in Lighthouse accessibility audits