---
title: Viewport Allows Zoom | Accessibility Rule
description: Zooming and scaling must not be disabled
source_url:
  html: https://testingbot.com/support/accessibility/web/rules/meta-viewport
  md: https://testingbot.com/support/accessibility/web/rules/meta-viewport/index.md
---
# Ensure \<meta name="viewport"\> does not disable text scaling and zooming

Rule ID: meta-viewportUser Impact: criticalGuidelines: WCAG 2.0

The `<meta name="viewport">` element should be configured to allow users to zoom and scale content, which is essential for accessibility, particularly for individuals with low vision.

## About This Rule

This guideline ensures that users can zoom and scale web content, enhancing accessibility for individuals with low vision. Adhering to this practice aligns with the following standards:

- WCAG 2.1 (AA): 1.4.4 Resize Text
- WCAG 2.0 (AA): 1.4.4 Resize Text
- WCAG 2.2 (AA): 1.4.4 Resize Text
- EN 301 549

## Why It Matters

Disabling zooming or limiting scaling can hinder users with visual impairments from adjusting content to a comfortable size, adversely affecting readability and navigation. Allowing users to control the zoom level ensures that web content is accessible to a broader audience. :contentReference[oaicite:0]{index=0}

## How to Fix

To ensure accessibility:

- **Allow User Scaling:** Remove the `user-scalable="no"` parameter from the `<meta name="viewport">` element to permit user zooming. 

    <!-- Remove this -->
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    
    <!-- Use this instead -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

- **Set Appropriate Maximum Scale:** Ensure that the `maximum-scale` parameter, if specified, is not less than 2 to allow sufficient zooming capability. 

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

### Examples

#### Incorrect

Disabling user scaling:

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

#### Correct

Allowing user scaling with appropriate maximum scale:

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

## More Information

- [H76: Using meta refresh to create an instant client-side redirect](https://www.w3.org/TR/WCAG20-TECHS/H76.html)
- [F41: Failure of Success Criterion 2.2.1, 2.2.4, and 3.2.5 due to using meta refresh to reload the page](https://www.w3.org/TR/WCAG20-TECHS/F41.html)

## Other Rules

Interested in other web accessibility rules? Please see these other rules:

- [nested-interactive](https://testingbot.com/support/accessibility/web/rules/nested-interactive)
- [no-autoplay-audio](https://testingbot.com/support/accessibility/web/rules/no-autoplay-audio)
- [object-alt](https://testingbot.com/support/accessibility/web/rules/object-alt)
- [role-img-alt](https://testingbot.com/support/accessibility/web/rules/role-img-alt)
- [scrollable-region-focusable](https://testingbot.com/support/accessibility/web/rules/scrollable-region-focusable)