Meta viewport large
Quick winFound on 5% of audited stores.
Remove or raise the `maximum-scale` value in your meta viewport tag so users can pinch-zoom on mobile devices.
What it is
Every webpage can include a small HTML tag called the "meta viewport" tag that tells mobile browsers how to display the page. One option inside that tag, `maximum-scale`, sets an upper limit on how far a user can zoom in. When `maximum-scale` is set to a value less than 5 (for example, `maximum-scale=1` or `user-scalable=no`), it physically prevents visitors from pinching to zoom — meaning they cannot make text or images larger, no matter how hard they try. This is the issue your scanner flagged.
Why it matters
Blocking zoom is a significant accessibility barrier for the roughly 2.2 billion people worldwide who have some form of vision impairment. Many low-vision users rely entirely on browser or OS zoom to read product descriptions, prices, and checkout instructions — locking zoom means they simply cannot use your store. Under WCAG 2.1 Success Criterion 1.4.4 (Resize Text), text must be resizable up to 200% without loss of content or functionality; a zoom-blocking viewport tag directly violates this criterion. This matters legally too: the ADA, EN 301 549 (EU), and equivalent accessibility laws increasingly cite WCAG conformance, so non-compliance creates real litigation and regulatory risk. Fixing it costs almost nothing (a one-line HTML change) and immediately improves usability for every visitor on a mobile device.
How to fix it
- Locate your theme's main HTML template file — commonly called index.html, base.html, theme.liquid, header.php, or similar depending on your platform.
- Find the <meta name="viewport"> tag, which will look something like: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
- Remove the maximum-scale attribute entirely, OR raise its value to 5 or higher (e.g., maximum-scale=5). Both approaches satisfy WCAG 1.4.4.
- Also remove user-scalable=no or change it to user-scalable=yes if present — this attribute also blocks zoom.
- Save the file, deploy the change, and reload your site on a real mobile device to confirm pinch-to-zoom works.
- Re-run your accessibility scanner to verify the meta-viewport-large finding is resolved.
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.
- Click the '…' (Actions) menu next to your active theme and choose 'Edit code'.
- In the Layout folder on the left, open 'theme.liquid' (or 'layout/theme.liquid').
- Use Ctrl+F / Cmd+F to search for 'viewport'.
- Find the <meta name="viewport"> tag and remove maximum-scale=1 and/or user-scalable=no, or set maximum-scale=5.
- Click 'Save'. No app or re-publish needed — the change is live immediately.
How to fix meta viewport large on Shopify Plus
- Follow the same steps as Shopify above.
- If you use a custom checkout (Checkout Extensibility), also check any checkout-specific liquid files such as checkout.liquid under the Layout folder and apply the same viewport fix there.
How to fix meta viewport large on WooCommerce
- Log in to your WordPress Admin dashboard.
- Go to Appearance → Theme File Editor (or use a child theme's files via FTP/SFTP).
- Open your active theme's 'header.php' file.
- Search for 'viewport' and edit the <meta name="viewport"> tag to remove maximum-scale restrictions.
- If your theme uses a page-builder (Elementor, Divi, etc.) that injects the viewport tag via its own settings, also check that builder's global site settings for a 'Disable Zoom' or 'Mobile Zoom' toggle and turn it off.
- Click 'Update File' to save.
How to fix meta viewport large on WordPress.org
- Go to Appearance → Theme File Editor in your WordPress Admin.
- Select your active theme (use a child theme to prevent update overwrites) and open 'header.php'.
- Find and edit the <meta name="viewport"> tag to remove maximum-scale=1 or user-scalable=no.
- Save the file. If you don't see a Theme File Editor, use FTP/SFTP to edit the file directly on your server.
How to fix meta viewport large on BigCommerce
- In your BigCommerce Control Panel, go to Storefront → My Themes.
- Click 'Advanced' → 'Edit Theme Files' on your active theme, OR download the theme, edit locally, and re-upload.
- Open 'templates/layout/base.html' (the path may vary slightly by theme).
- Search for 'viewport' and update the <meta name="viewport"> tag to remove zoom restrictions.
- Save or re-upload the theme and apply it.
How to fix meta viewport large on Wix
- Wix automatically generates the viewport meta tag and does not expose it for direct editing in the standard editor.
- Open your site in the Wix Editor and go to Settings (left panel) → Mobile → confirm 'Optimize for Mobile' is enabled — Wix's mobile-optimized mode uses a permissive viewport.
- If you use Wix's Velo (developer mode), you can inject a corrected meta tag via the site's <head> section: go to Settings → Custom Code → Add Code in the <head> tag sitewide, and paste a corrected <meta name="viewport"> tag.
- Alternatively, contact Wix Support and request confirmation that zoom is not blocked on your site.
How to fix meta viewport large on Wix Studio
- In Wix Studio, open your project and navigate to Settings → Custom Code.
- Add a code snippet to the <head> section sitewide that overrides the viewport tag with a zoom-permissive version (see code snippet below).
- Publish the site for the change to take effect.
How to fix meta viewport large on Squarespace
- Squarespace controls the viewport tag internally and generally does not block zoom.
- To add or override the tag, go to Website → Pages → click the gear icon on any page → Advanced → Page Header Code Injection, and paste a corrected <meta name="viewport"> tag.
- For a sitewide fix, go to Settings → Advanced → Code Injection → Header and add the corrected tag there.
- Note: injecting a second viewport tag may cause duplicate-tag warnings — confirm via DevTools that the correct tag takes effect.
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, paste a corrected <meta name="viewport"> tag (Webflow's default is already zoom-permissive, so this is only needed if a previous developer added a restrictive override).
- Publish the site.
How to fix meta viewport large on Adobe Commerce (Magento)
- SSH into your server or use your IDE to open your active theme directory, typically located at app/design/frontend/<Vendor>/<theme>/.
- Find or create the file: Magento_Theme/layout/default_head_blocks.xml OR locate the root layout XML that renders the viewport tag.
- Alternatively, search your theme's .phtml or layout XML files for 'viewport' and locate where the tag is output.
- Edit the <meta name="viewport"> content attribute to remove maximum-scale restrictions.
- Run bin/magento cache:flush after saving, then verify on a mobile device.
How to fix meta viewport large on Magento Open Source
- Follow the same steps as Adobe Commerce (Magento) above.
- The theme file path is the same: app/design/frontend/<Vendor>/<theme>/. Run bin/magento cache:flush after saving.
How to fix meta viewport large on PrestaShop
- Via FTP/SFTP or your hosting file manager, navigate to your active theme folder: themes/<your-theme>/templates/_partials/ or themes/<your-theme>/templates/.
- Open 'head.tpl' and search for 'viewport'.
- Edit the <meta name="viewport"> tag to remove maximum-scale=1 or user-scalable=no.
- Save the file and clear PrestaShop's cache under Advanced Parameters → Performance → Clear Cache.
How to fix meta viewport large on OpenCart
- Via FTP/SFTP, navigate to your theme folder: catalog/view/theme/<your-theme>/template/common/.
- Open 'header.twig' (OpenCart 3+) or 'header.tpl' (OpenCart 2.x).
- Find the <meta name="viewport"> tag and remove zoom-blocking attributes.
- Save and refresh your store. Clear any server-side cache if applicable.
How to fix meta viewport large on Headless / Custom (I build in code)
- Open the root HTML shell or document component — e.g., _document.js / _document.tsx in Next.js, app.html in SvelteKit, index.html in a Vite/CRA app, or your server-rendered base template.
- Search for the <meta name="viewport"> tag.
- Set the content attribute to: width=device-width, initial-scale=1 (no maximum-scale, no user-scalable=no).
- Rebuild and deploy. Verify with Chrome DevTools → device emulation that pinch-zoom is not blocked.
Does your site have this issue?
Run a free SEOLZ scan 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 webpage can include a small HTML tag called the "meta viewport" tag that tells mobile browsers how to display the page. One option inside that tag, `maximum-scale`, sets an upper limit on how far a user can zoom in. When `maximum-scale` is set to a value less than 5 (for example, `maximum-scale=1` or `user-scalable=no`), it physically prevents visitors from pinching to zoom — meaning they cannot make text or images larger, no matter how hard they try. This is the issue your scanner flagged.
Why does meta viewport large matter?
Blocking zoom is a significant accessibility barrier for the roughly 2.2 billion people worldwide who have some form of vision impairment. Many low-vision users rely entirely on browser or OS zoom to read product descriptions, prices, and checkout instructions — locking zoom means they simply cannot use your store. Under WCAG 2.1 Success Criterion 1.4.4 (Resize Text), text must be resizable up to 200% without loss of content or functionality; a zoom-blocking viewport tag directly violates this criterion. This matters legally too: the ADA, EN 301 549 (EU), and equivalent accessibility laws increasingly cite WCAG conformance, so non-compliance creates real litigation and regulatory risk. Fixing it costs almost nothing (a one-line HTML change) and immediately improves usability for every visitor on a mobile device.
How do I fix meta viewport large?
Remove or raise the `maximum-scale` value in your meta viewport tag so users can pinch-zoom on mobile devices.
Authoritative references
- How to fix this specific rule — Deque/axe (rule reference)
- WCAG 2 overview — W3C WAI