rule @community/rule-viewport-meta-required

Viewport Meta Required

Every web page must include <meta name='viewport' content='width=device-width, initial-scale=1'> and must never set maximum-scale or user-scalable=no.

Skill: @community
Domain: frontend-design
Version: 1.0.0
Quality: 0.0
Edges: 0 out · 0 in
Tokens: 54/254/562

$ aoe install @community/rule-viewport-meta-required

Projection

3 levels · agent picks one per query

Always in _index.xml · the agent never has to ask for this.

ViewportMetaRequired [rule] v1.0.0

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

Loaded when retrieval picks the atom as adjacent / supporting.

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">

Loaded when retrieval picks the atom as a focal / direct hit.

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">

Relations

related: [@community/check-contrast-aa, @community/constraint-mobile-touch-target-44px, @community/rule-reduced-motion-required]

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">

Source

where the compiled artifact came from

aoe-engine/examples/frontend-design/primes/compiled/@community/rule-viewport-meta-required/atom.yaml