---
title: "Fix zooming and scaling disabled"
description: "Fix 'zooming and scaling must not be disabled' Lighthouse audit. Remove user-scalable=no and maximum-scale=1 from your viewport meta tag."
canonical_url: "https://unlighthouse.dev/learn-lighthouse/accessibility/meta-viewport"
last_updated: "2025-01-18"
---
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 `` in the ``.
4. Check for `user-scalable=no` or `maximum-scale` below 5.
Run this in the Console to check quickly:
```javascript
document.querySelector('meta[name="viewport"]')?.content
```
## Fix
### 1. Remove zoom restrictions entirely
Remove all scaling restrictions. This is the best approach.
```html
```
### 2. Set maximum scale to 5 or higher
Allow at least 5x magnification if you must constrain zooming:
```html
```
## Framework examples
In Nuxt, configure the viewport in `nuxt.config.ts`:
```typescript
export default defineNuxtConfig({
app: {
head: {
meta: [
{ name: 'viewport', content: 'width=device-width, initial-scale=1' }
]
}
}
})
```
For [React](https://react.dev) with [Next.js](https://nextjs.org), update `pages/_document.js` or use the `Head` component:
```jsx
import Head from 'next/head'
export default function Page() {
return (
)
}
```
## 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:
- [Color contrast](/learn-lighthouse/accessibility/color-contrast) - Both affect users with vision impairments
- [Target size](/learn-lighthouse/accessibility/target-size) - Small targets plus no zoom is doubly problematic
- [Image size responsive](/learn-lighthouse/best-practices/image-size-responsive) - Both involve proper responsive design
## 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.