Meta viewport large
Quick winFound on 3% of audited stores.
Remove or raise the `maximum-scale` value in your site's `<meta name="viewport">` tag so mobile users can pinch-to-zoom freely.
What it is
Every website has a small snippet of HTML called the viewport meta tag that tells mobile browsers how to display the page. One of the settings in that tag — `maximum-scale` — can be used to cap how far a visitor is allowed to zoom in. When this value is set to `1` (or any value below `5`), it overrides the browser's built-in zoom and physically prevents users from enlarging text or images. In other words, the code is telling the phone "do not let the visitor make anything bigger, no matter what." This is a WCAG (Web Content Accessibility Guidelines) accessibility failure under Success Criterion 1.4.4 (Resize Text).
Why it matters
Roughly 1 in 4 adults has some form of disability, and many rely on pinch-to-zoom to read small product descriptions, prices, and checkout forms. Blocking zoom makes your store effectively unusable for those customers — directly costing you sales. Beyond lost revenue, WCAG compliance is increasingly a legal requirement in the US (ADA), EU (European Accessibility Act, effective 2025), UK, and Canada; accessibility lawsuits against ecommerce stores have risen sharply. Google also factors mobile usability into rankings, and a store that fails accessibility audits can see depressed organic traffic. Fixing this is one of the fastest, lowest-risk accessibility wins available.
How to fix it
- Open your site's main HTML template file (often called theme.liquid, header.php, base.html, or index.html depending on your platform).
- Search for the string `<meta name="viewport"` — there should be exactly one instance.
- Inspect the `content` attribute for the properties `maximum-scale` and `user-scalable`.
- If `maximum-scale` is present and set to any value less than 5 (e.g. `maximum-scale=1`), either remove that property entirely or raise it to `maximum-scale=5`.
- If `user-scalable=no` or `user-scalable=0` is present, remove that property entirely.
- Save the file, deploy the change, and verify on a real mobile device or browser DevTools that pinch-to-zoom now works on the page.
<meta name="viewport" content="width=device-width, initial-scale=1.0">Fix it on your platform
Pick your platform for the exact steps.
How to fix meta viewport large on Shopify
- In your Shopify Admin, go to Online Store → Themes.
- Next to your active theme, click Actions → Edit code.
- In the left-hand file tree under 'Layout', click theme.liquid.
- Use Ctrl+F / Cmd+F to search for `<meta name="viewport"`.
- Edit the content attribute: remove `maximum-scale=1` (or any value below 5) and remove `user-scalable=no` if present. A safe final tag looks like: `<meta name="viewport" content="width=device-width, initial-scale=1.0">`.
- Click Save. Verify on a mobile device that pinch-to-zoom works.
How to fix meta viewport large on Shopify Plus
- Same as Shopify: Admin → Online Store → Themes → Actions → Edit code → Layout/theme.liquid.
- If your store uses a custom storefront (Hydrogen/Headless), locate the root HTML shell component (e.g. root.tsx or _document.tsx) in your repo and apply the same edit there.
- Redeploy via your CI/CD pipeline or Shopify CLI after saving.
How to fix meta viewport large on WooCommerce
- In WordPress Admin, go to Appearance → Theme File Editor (or use a file manager / SFTP).
- Open your active theme's header.php file.
- Search for `<meta name="viewport"` and update the content attribute as described in the generic steps.
- If your theme does not show header.php in the editor, use a child theme — create or open your child theme's header.php and override the tag there.
- Alternatively, install a plugin such as 'Simple Custom CSS and JS' or 'Code Snippets' and use wp_head hook to output a corrected viewport tag (then ensure the original tag is removed from header.php).
- Save and check the rendered source on mobile to confirm only one viewport tag exists.
How to fix meta viewport large on WordPress.org
- Go to Appearance → Theme File Editor in wp-admin.
- Select header.php (or the file that outputs `<head>`) from the right-hand file list.
- Find `<meta name="viewport"` and remove any `maximum-scale` value below 5 and any `user-scalable=no`.
- Save. If the theme auto-regenerates the tag, use a child theme override or a code-snippet plugin to force the corrected tag via the wp_head action.
How to fix meta viewport large on BigCommerce
- In your BigCommerce admin, go to Storefront → My Themes.
- Click Advanced → Edit Theme Files on your active theme (or Download the theme, edit locally, then re-upload).
- Open templates/layout/base.html (Cornerstone theme) or the equivalent base layout file for your theme.
- Search for `<meta name="viewport"` and correct the content attribute.
- Save / upload and preview on mobile to confirm zoom works.
How to fix meta viewport large on Wix
- Wix automatically injects a mobile-friendly viewport tag and does not expose it for direct editing in most site types.
- Open the Wix Editor → click the mobile icon (bottom toolbar) to switch to Mobile view.
- If you use Wix's Dev Mode / Velo, open the site's <head> custom code: Settings → Custom Code → Add Code in the Head section.
- Paste a corrected `<meta name="viewport" content="width=device-width, initial-scale=1.0">` tag there (Wix will honour the last-declared tag in most browsers).
- If the issue persists because Wix's platform tag overrides yours, contact Wix Support and cite WCAG 1.4.4 — this is a platform-level accessibility requirement.
How to fix meta viewport large on Wix Studio
- In Wix Studio, open your project and navigate to Site → Settings → Custom Code.
- Add a custom `<meta name="viewport" content="width=device-width, initial-scale=1.0">` tag in the Head section to override any restrictive default.
- Publish and verify pinch-to-zoom on a real mobile device.
How to fix meta viewport large on Squarespace
- Squarespace injects the viewport tag at the platform level; it cannot be removed via the UI.
- Go to Website → Pages → any page → Edit → click the gear icon, then Advanced → Page Header Code Injection.
- Add `<meta name="viewport" content="width=device-width, initial-scale=1.0">` there — this places a corrected tag after the platform's tag and most mobile browsers will use the last-declared value.
- Alternatively, use Settings → Advanced → Code Injection → Header to apply it site-wide.
- Test on a mobile device. If the Squarespace platform tag still overrides yours, raise a support ticket referencing WCAG 1.4.4 compliance.
How to fix meta viewport large on Webflow
- In the Webflow Designer, open Project Settings (gear icon, top-left).
- Go to the Custom Code tab.
- In the 'Head Code' field, add: `<meta name="viewport" content="width=device-width, initial-scale=1.0">`.
- Click Save Changes, then Publish your site.
- Inspect the rendered source on mobile to confirm no `maximum-scale` restriction remains.
How to fix meta viewport large on Adobe Commerce (Magento)
- Via SFTP or your server file manager, navigate to your active theme folder: app/design/frontend/<Vendor>/<Theme>/Magento_Theme/layout/.
- Open (or create) default_head_blocks.xml.
- Locate any `<meta name="viewport"` node and update its content attribute to remove `maximum-scale` restrictions.
- If the tag is set in a .phtml file, check Magento_Theme/templates/html/head.phtml in your theme.
- Run `bin/magento cache:flush` and `bin/magento setup:static-content:deploy` after saving.
- Verify on mobile that pinch-to-zoom is now permitted.
How to fix meta viewport large on Magento Open Source
- Follow the same steps as Adobe Commerce: locate the viewport meta tag in your theme's default_head_blocks.xml or head.phtml, remove the `maximum-scale` restriction, flush caches, and redeploy static content.
How to fix meta viewport large on PrestaShop
- Via FTP or your hosting file manager, open your active theme folder: themes/<your-theme>/templates/_partials/head.tpl.
- Find `<meta name="viewport"` and remove `maximum-scale=1` or `user-scalable=no`.
- Save the file and clear PrestaShop's smarty cache under Advanced Parameters → Performance → Clear cache.
How to fix meta viewport large on OpenCart
- Open catalog/view/theme/<your-theme>/template/common/header.twig (OpenCart 3+) or header.tpl (OpenCart 2).
- Find `<meta name="viewport"` and correct the content attribute.
- Save and refresh your storefront cache.
Does your site have this issue?
Run a free SEOLZ audit to find meta viewport large — and every other issue — across your whole site in minutes.
Scan my site freeFrequently asked questions
What is Meta viewport large?
Every website has a small snippet of HTML called the viewport meta tag that tells mobile browsers how to display the page. One of the settings in that tag — `maximum-scale` — can be used to cap how far a visitor is allowed to zoom in. When this value is set to `1` (or any value below `5`), it overrides the browser's built-in zoom and physically prevents users from enlarging text or images. In other words, the code is telling the phone "do not let the visitor make anything bigger, no matter what." This is a WCAG (Web Content Accessibility Guidelines) accessibility failure under Success Criterion 1.4.4 (Resize Text).
Why does meta viewport large matter?
Roughly 1 in 4 adults has some form of disability, and many rely on pinch-to-zoom to read small product descriptions, prices, and checkout forms. Blocking zoom makes your store effectively unusable for those customers — directly costing you sales. Beyond lost revenue, WCAG compliance is increasingly a legal requirement in the US (ADA), EU (European Accessibility Act, effective 2025), UK, and Canada; accessibility lawsuits against ecommerce stores have risen sharply. Google also factors mobile usability into rankings, and a store that fails accessibility audits can see depressed organic traffic. Fixing this is one of the fastest, lowest-risk accessibility wins available.
How do I fix meta viewport large?
Remove or raise the `maximum-scale` value in your site's `<meta name="viewport">` tag so mobile users can pinch-to-zoom freely.
Authoritative references
- How to fix this specific rule — Deque/axe (rule reference)
- WCAG 2 overview — W3C WAI