
## Why it matters

Using `content="user-scalable=no"` in a `<meta name="viewport">` element disables zooming in some browsers.
Users are forced to view the text at the specified size.

Most people find it easier to read text when it is sufficiently large.
People with visual disabilities, low vision, or limited color perception are likely to find text unreadable when it’s too small.

## How to fix

Remove `content="user-scalable=no"` from all `<meta>` elements.

## Example

<PassFailGrid>
<FailSection>

A news page is coded in a way that browser zooming causes some content to extend beyond the screen's viewport.
In an attempt to address that problem, a `<meta>` element is configured to disable browser zooming.

As a result, text is always displayed at the specified size. However, some users now find some text difficult to read because it is too small.

</FailSection>
<FailExample example={`
<meta name="viewport" [content="user-scalable=no"]>
`} />
<PassSection>

The `<meta>` element is reconfigured to (1) set the width of the page to match the screen width of the device, and (2) set the initial zoom level of the page.
Everyone can zoom the text to a readable size, and the content stays within the viewport.

</PassSection>
<PassExample example={`
<meta name="viewport" [content="width=device-width, initial-scale=1.0"]>
`} />
</PassFailGrid>

## About this rule

This rule passes if:

-   No `<meta>` element contains `content="user-scalable=no"`

## More examples

<Links>
    <HyperLink href="https://www.w3.org/WAI/WCAG21/Understanding/resize-text.html">
        Understanding Success Criterion 1.4.4: Resize text
    </HyperLink>
</Links>


meta-viewport

Why it matters

How to fix

Example

About this rule

More examples