Users should be able to zoom and scale the text up to 500%
Some customers with low vision need to zoom far beyond double size to read product text on a phone. A maximum-scale limit below 5 caps how far they can enlarge prices, descriptions and form fields.
- Rule id
- meta-viewport-large
- Source
- axe-core 4.13.0
- Impact
- Minor
- Fix tier
- AUTO
- on Shopify, Shopware, WooCommerce and Magento
- Status
- runs
What the check does
Ensure <meta name="viewport"> can scale a significant amount
Only viewport tags in the top-level document are checked; one inside an iframe is skipped. axe-core turns off its usual visibility filter for this rule, so the tag is tested although nothing displays it. When content is absent or empty, the tag passes.
The content value is broken into key=value pairs at every comma or semicolon, and keys and values are compared in lower case with surrounding spaces trimmed. Here only maximum-scale decides: a value of at least 2 and below 5 fails, for example maximum-scale=3. A negative maximum-scale is dropped, and maximum-scale=yes is read as 1.
A non-negative maximum-scale below 2 passes this rule, as does user-scalable=no. Both fail the separate meta-viewport rule instead, which Validiscan’s scanner runs in its WCAG conformance pass.
The scanner runs this rule in its best-practice pass, stores only failures and keeps them out of remediation progress. Only the markup is read, so the rule cannot tell whether a page stays usable under strong zoom.
How to fix it
Remove the maximum-scale value from the <meta name="viewport"> tag in the layout template, or set it to at least 5, and do not set user-scalable=no.
WCAG success criteria
Best practice: not tied to a WCAG success criterion.
Where a recipe fixes it
Shopify: recipe meta-viewport-zoom
Show the before and after (1)
layout/checkout.liquid Changes to layout/checkout.liquid: 1 added, 1 removed
| Line before | Line after | Change | Code |
|---|---|---|---|
| 6 | 6 | <html class="no-js"> | |
| 7 | 7 | <head> | |
| 8 | 8 | <meta charset="utf-8"> | |
| 9 | Removed | <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> | |
| 9 | Added | <meta name="viewport" content="width=device-width,initial-scale=1"> | |
| 10 | 10 | <meta name="robots" content="noindex"> | |
| 11 | 11 | <link rel="canonical" href="{{ canonical_url }}"> | |
| 12 | 12 | <!-- Checkout assets: //cdn.shopify.com/s/files/1/0712/3456/7890/t/12/assets/ (served locally by the fixture server) --> |
layout/theme.focused.liquid Changes to layout/theme.focused.liquid: 1 added, 1 removed
| Line before | Line after | Change | Code |
|---|---|---|---|
| 10 | 10 | <head> | |
| 11 | 11 | <meta charset="utf-8"> | |
| 12 | 12 | <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| 13 | Removed | <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> | |
| 13 | Added | <meta name="viewport" content="width=device-width,initial-scale=1"> | |
| 14 | 14 | <title></title> | |
| 15 | 15 | <link rel="canonical" href="{{ canonical_url }}"> | |
| 16 | 16 | <!-- Theme assets: //cdn.shopify.com/s/files/1/0712/3456/7890/t/12/assets/ (served locally by the fixture server) --> |
layout/theme.liquid Changes to layout/theme.liquid: 1 added, 1 removed
| Line before | Line after | Change | Code |
|---|---|---|---|
| 11 | 11 | <head> | |
| 12 | 12 | <meta charset="utf-8"> | |
| 13 | 13 | <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| 14 | Removed | <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> | |
| 14 | Added | <meta name="viewport" content="width=device-width,initial-scale=1"> | |
| 15 | 15 | <meta name="theme-color" content="{{ settings.color_background }}"> | |
| 16 | 16 | <link rel="canonical" href="{{ canonical_url }}"> | |
| 17 | 17 | {%- comment -%} On the live store theme assets load from //cdn.shopify.com/s/files/1/0712/3456/7890/t/12/assets/; the fixture serves them from {{ routes.root_url }}assets/. {%- endcomment %} |
Shopware: recipe meta-viewport-zoom
Show the before and after (1)
Resources/views/storefront/layout/meta.html.twig Changes to Resources/views/storefront/layout/meta.html.twig: 1 added, 1 removed
| Line before | Line after | Change | Code |
|---|---|---|---|
| 6 | 6 | ||
| 7 | 7 | {% block layout_head_meta_tags_viewport %} | |
| 8 | 8 | {# Added by the merchant's agency to stop "zoom jumps" on iOS. #} | |
| 9 | Removed | <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> | |
| 9 | Added | <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| 10 | 10 | {% endblock %} | |
| 11 | 11 | ||
| 12 | 12 | {% block layout_head_meta_tags_general %} |
WooCommerce: recipe meta-viewport-zoom
Show the before and after (1)
header-checkout.php Changes to header-checkout.php: 1 added, 1 removed
| Line before | Line after | Change | Code |
|---|---|---|---|
| 12 | 12 | <head> | |
| 13 | 13 | <meta charset="<?php bloginfo( 'charset' ); ?>"> | |
| 14 | 14 | <?php // VALIDISCAN-SEED meta-viewport: zooming is disabled. ?> | |
| 15 | Removed | <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> | |
| 15 | Added | <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| 16 | 16 | <?php wp_head(); ?> | |
| 17 | 17 | </head> | |
| 18 | 18 |
header.php Changes to header.php: 1 added, 1 removed
| Line before | Line after | Change | Code |
|---|---|---|---|
| 14 | 14 | <head> | |
| 15 | 15 | <meta charset="<?php bloginfo( 'charset' ); ?>"> | |
| 16 | 16 | <?php // VALIDISCAN-SEED meta-viewport: zooming is disabled ("stops iOS zooming into inputs"). ?> | |
| 17 | Removed | <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> | |
| 17 | Added | <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| 18 | 18 | <?php wp_head(); ?> | |
| 19 | 19 | </head> | |
| 20 | 20 |
Magento: recipe meta-viewport-zoom
Show the before and after (1)
app/design/frontend/Validiscan/fixture/Magento_Theme/layout/default_head_blocks.xml Changes to app/design/frontend/Validiscan/fixture/Magento_Theme/layout/default_head_blocks.xml: 1 added, 1 removed
| Line before | Line after | Change | Code |
|---|---|---|---|
| 3 | 3 | <head> | |
| 4 | 4 | <!-- VALIDISCAN-SEEDED meta-viewport: pinch zoom disabled (Luma 2.0-2.3 default kept by the theme). | |
| 5 | 5 | Fixed variant: content="width=device-width, initial-scale=1". --> | |
| 6 | Removed | <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/> | |
| 6 | Added | <meta name="viewport" content="width=device-width, initial-scale=1"/> | |
| 7 | 7 | <meta name="format-detection" content="telephone=no"/> | |
| 8 | 8 | <css src="css/styles-m.css"/> | |
| 9 | 9 | <css src="css/styles-l.css" media="screen and (min-width: 768px)"/> |
Start with a free check of your shop.
Send your shop’s address. Validiscan scans it and replies with every failure the scan can prove, with the page and the code.
Request a free checkOr write to info@validiscan.com.
What the free check covers, and what it leaves out- You send
- your shop’s address
- Pages scanned
- up to 15
- You get
- every failure the scan can prove, with the page and the code
- On your shop
- public pages only; no login, nothing bought, no forms sent
- What it is not
- a full audit