# Viewport meta tag must not disable user scaling.

> Canonical HTML version: https://rocketvalidator.com/accessibility-validation/accesslint/0.16/distinguishable/meta-viewport
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The viewport `meta` tag controls how a page is displayed on mobile devices, including whether users can pinch-to-zoom. When this tag includes `user-scalable=no` or sets `maximum-scale` to a value less than 2, it prevents users from zooming in on content. This restriction blocks people with low vision from enlarging text and other elements to a readable size.

People with low vision often need to zoom content to 200% or more to read it comfortably. Disabling zoom forces these users to read text at whatever size the developer chose, which may be too small. On mobile devices, where screens are already constrained, this problem is especially acute. Preventing zoom can also affect users with cognitive disabilities who benefit from enlarging content to reduce visual clutter and improve focus.

This rule maps to WCAG 2.0 Success Criterion 1.4.4 (Resize Text) at Level AA, which requires that text can be resized up to 200% without assistive technology and without loss of content or functionality. Because text that cannot be resized to 200% also cannot fit within a 320-by-256 CSS pixel area, this issue is also relevant to Success Criterion 1.4.10 (Reflow).

## How to fix it

Remove the zoom restriction from the viewport `meta` tag. There are two properties that can cause this problem:

- `user-scalable=no` — directly disables pinch-to-zoom. Remove this property entirely, or set it to `yes`.
- `maximum-scale` set to a value less than 2 — limits how far users can zoom in. Remove this property, or set it to at least `2.0`.

If removing these restrictions causes layout problems at high zoom levels, the correct fix is to improve the responsive design of the page rather than preventing zoom. Use relative units like `em`, `rem`, or percentages for font sizes and container widths, and test layouts at 200% zoom.

Note that most modern mobile browsers ignore these viewport restrictions by default or provide an accessibility setting that overrides them. However, users on older mobile browsers may still be affected, and conforming to WCAG requires that the markup itself not impose these limits.

## Examples

### Zoom disabled with `user-scalable=no`

This viewport tag prevents zooming entirely:

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

Remove `user-scalable=no` or set it to `yes`:

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

### Zoom limited with `maximum-scale` below 2

This viewport tag restricts zooming to 150%, which is below the 200% threshold required by WCAG:

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

Set `maximum-scale` to at least `2.0`, or remove it:

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

### Zoom locked to 100% with `maximum-scale=1`

A common pattern that completely prevents zooming:

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

Remove both restrictions:

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

### Viewport tag that allows zooming

This tag sets `user-scalable` to `yes` explicitly, which is fine but also unnecessary since `yes` is the default:

```html
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />
```