ViewportMetaRequired [rule] v1.0.0

Every web page must include and must never set maximum-scale or user-scalable=no.

Severity

block

Applies When

any web page served to mobile or tablet browsers

Verify By

Check for viewport meta. Confirm content contains 'width=device-width'. Confirm no maximum-scale or user-scalable=no is present. Test with browser DevTools mobile emulation.

Code

    <!-- Correct -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Also acceptable -->
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">

    <!-- WRONG: blocks pinch-to-zoom (WCAG SC 1.4.4 violation) -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  

ViewportMetaRequired [rule] v1.0.0

Every web page must include and must never set maximum-scale or user-scalable=no.

Severity

block

Applies When

any web page served to mobile or tablet browsers

Verify By

Check for viewport meta. Confirm content contains 'width=device-width'. Confirm no maximum-scale or user-scalable=no is present. Test with browser DevTools mobile emulation.

Code

    <!-- Correct -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Also acceptable -->
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">

    <!-- WRONG: blocks pinch-to-zoom (WCAG SC 1.4.4 violation) -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  

Rationale

Without the viewport meta tag, mobile browsers default to a desktop viewport width (980px) and shrink the page to fit, making text illegible. Setting maximum-scale or user-scalable=no blocks pinch-to-zoom, which is required for accessibility (WCAG SC 1.4.4 — Resize Text).

Severity

block

Applies When

any web page served to mobile or tablet browsers

Verify By

Check for viewport meta. Confirm content contains 'width=device-width'. Confirm no maximum-scale or user-scalable=no is present. Test with browser DevTools mobile emulation.

Code

    <!-- Correct -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Also acceptable -->
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">

    <!-- WRONG: blocks pinch-to-zoom (WCAG SC 1.4.4 violation) -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">