WCAG 1.4.4 (AA)
The viewport blocks pinch-zoom
What this failure is
Every modern web page has a <meta name="viewport"> tag that tells mobile browsers how to render the layout. Some templates (especially older mobile-first templates copied from tutorials in 2013) include user-scalable=no or maximum-scale=1.0, which stops the user from pinching to zoom on their phone. This was originally done to prevent a slight zoom-jitter when tapping form fields on iOS 6. It is no longer necessary — iOS solved the jitter years ago by respecting 16px font sizes — but the code lingers. The result today is that users with low vision cannot enlarge your text and images to read them, on their own device, using a gesture their operating system provides for exactly this purpose.
Reference: WCAG 1.4.4 (AA) — the authoritative spec.
Who it affects
- Low-vision users: Cannot pinch-zoom on iPhone or Android to enlarge text; forced to increase the OS-wide text size, which then breaks the layout of every other app they use.
- Users with age-related farsightedness: The natural response to small text on a phone is to pinch outwards; when nothing happens, users assume the site is broken and leave.
- Users reading in bright sunlight: Reduced contrast in daylight makes small text hard to read even for users with typical vision; zoom is the workaround.
- Users on small phones: SE-sized phones and folded foldables have very tight screens; blocking zoom removes the standard escape hatch.
- Users with tremor or reduced fine motor control: Tapping small controls precisely is easier when the target is zoomed; blocking zoom forces the user to hit tap-targets at the size the designer chose, which is often below the recommended 44x44 CSS pixels.
How to fix it
Concrete steps for the four platforms most small e-commerce sites run on. If you use a different stack, the underlying HTML change is the same.
Shopify
Open Online Store > Themes > Edit code, open layout/theme.liquid, and find the line beginning <meta name="viewport". Replace the whole tag with <meta name="viewport" content="width=device-width, initial-scale=1">. Do not include user-scalable=no or maximum-scale. Modern Shopify Dawn themes already have this right; the problem usually comes from older third-party themes purchased before 2020. If you use a page-builder app that injects its own head content (PageFly, Shogun), check the app's global settings for a viewport override too.
WooCommerce
The viewport meta is written by your theme, usually in header.php or a template-part called header.php. Open Appearance > Theme File Editor, search for viewport, and remove user-scalable=no and any maximum-scale value less than 5. If your theme lets you set the viewport via a plugin or Customizer option, edit it there rather than editing header.php so your changes survive theme updates. As a last resort a functions.php snippet using the wp_head hook can inject a corrected meta tag.
Wix
Wix writes the viewport meta itself and, at time of writing, does not include user-scalable=no. If this rule fires on a Wix site, the offending tag is almost certainly in your Custom Code (Settings > Custom Code) — someone pasted a viewport override there. Delete the entry or remove the user-scalable and maximum-scale attributes from it.
Squarespace
Squarespace's default templates set the viewport correctly. If the scanner flags this rule on a Squarespace site, look in Settings > Advanced > Code Injection > Header for a hand-added viewport tag and either delete it or change it to <meta name="viewport" content="width=device-width, initial-scale=1">. Code Injection requires a Business plan or above; personal-plan sites cannot inject conflicting viewport tags in the first place, so this rule rarely fires there.
Notes
WCAG 1.4.4 requires that text can be resized up to 200% without loss of content or function. Pinch-zoom is the mobile-browser mechanism that implements this; blocking it is the most common way sites accidentally fail 1.4.4. Safari on iOS started respecting user-scalable=no again for a while, then reversed course; assuming any browser will override your bad viewport for you is not a safe strategy. Fix it in your HTML.
Check your own site
Our accessibility statement scan is free and reports findings only — we do not certify sites.