Meta viewport
Quick winFound on 12% of audited stores.
Remove `user-scalable=no` (and any `maximum-scale` value below 5) from your site's `<meta name="viewport">` tag so visitors can pinch-to-zoom on mobile devices.
What it is
The `<meta name="viewport">` tag in your site's HTML tells mobile browsers how to display your page. Two specific settings inside it — `user-scalable=no` and `maximum-scale=1` (or any value less than 5) — completely prevent visitors from pinching to zoom in on your content. This violates WCAG 2.1 Success Criterion 1.4.4 (Resize Text), which requires that text can be resized up to 200% without loss of content or functionality. Removing these restrictions restores the browser's built-in zoom capability and brings your site into compliance.
Why it matters
Millions of people with low vision, aging eyesight, or small screens rely on pinch-to-zoom to read text comfortably — disabling it makes your store actively unusable for them. From a legal standpoint, WCAG 1.4.4 is referenced in accessibility laws and regulations in the US (ADA), EU (EN 301 549), and UK (PSBAR), meaning a blocked zoom can expose you to discrimination complaints or lawsuits. On the SEO and conversion side, Google uses mobile usability as a ranking signal, and visitors who can't read your product descriptions will simply bounce — costing you sales. Fixing this is one of the fastest accessibility wins available: it's a single line of HTML.
How to fix it
- Locate the `<meta name="viewport">` tag in the `<head>` section of your HTML template or theme.
- Remove the `user-scalable=no` (or `user-scalable=0`) attribute entirely from the content value.
- If `maximum-scale` is set to a value less than 5 (e.g. `maximum-scale=1`), either remove it or raise it to at least `maximum-scale=5`.
- Keep the essential parts of the tag intact — a safe, compliant value is: `<meta name="viewport" content="width=device-width, initial-scale=1">`.
- Save the file/template and test on a real mobile device or browser DevTools by attempting to pinch-to-zoom — content should scale freely.
- Re-run an accessibility audit (e.g. axe DevTools, Lighthouse) to confirm the meta-viewport rule passes.
<meta name="viewport" content="width=device-width, initial-scale=1">Fix it on your platform
Pick your platform for the exact steps.
How to fix meta viewport on Shopify
- In your Shopify admin, go to Online Store → Themes.
- Next to your active theme, click Actions → Edit code.
- In the Layout folder, open `theme.liquid`.
- Search (Ctrl/Cmd+F) for `meta name="viewport"`.
- Edit the content attribute to read exactly: `content="width=device-width, initial-scale=1"` — remove `user-scalable=no` and any `maximum-scale` below 5.
- Click Save. Verify by opening your storefront on a mobile device and pinching to zoom.
How to fix meta viewport on Shopify Plus
- Same as Shopify: Online Store → Themes → Actions → Edit code → Layout/theme.liquid.
- If you use a custom checkout, also check `checkout.liquid` (Shopify Plus only) for a second viewport meta tag and apply the same fix.
- Save both files and test zoom on storefront and checkout pages.
How to fix meta viewport on WooCommerce
- In your WordPress admin, go to Appearance → Theme File Editor (or use a code editor via FTP/SFTP).
- Open your active theme's `header.php` (or `functions.php` if the tag is injected via `wp_head`).
- Search for `meta name="viewport"` and remove `user-scalable=no` / fix `maximum-scale`.
- If you are using a child theme, make the edit in the child theme's `header.php` so it survives updates.
- If a page-builder or plugin is injecting the tag, check plugins like Jetpack or your theme's Customizer settings for a 'Mobile' or 'Viewport' option.
- Save and test on mobile.
How to fix meta viewport on BigCommerce
- In your BigCommerce admin, go to Storefront → My Themes.
- Click Advanced → Edit Theme Files on your active theme.
- Open `templates/layout/base.html` (Cornerstone theme) or the equivalent base layout file.
- Search for `meta name="viewport"` and remove `user-scalable=no` / correct `maximum-scale`.
- Save the file and preview on a mobile device.
How to fix meta viewport on Wix
- Wix automatically injects a compliant viewport meta tag and does not expose it for direct editing.
- If you added custom HTML via Wix's 'Embed Code' / 'Custom Code' feature (Settings → Custom Code or a HTML embed widget) that contains a viewport meta tag, locate and remove the problematic attributes there.
- Go to Settings → Custom Code, review any code in the <head> section, and delete `user-scalable=no` or `maximum-scale` values below 5.
- If the issue persists and you cannot find a custom code block, contact Wix Support — the platform-injected tag is not owner-editable.
How to fix meta viewport on Squarespace
- Squarespace controls the viewport meta tag at the platform level and it is not directly editable.
- Check whether a third-party code injection is causing the problem: go to Settings → Advanced → Code Injection and inspect the Header field for any `<meta name="viewport">` tag you or a developer added.
- If found, delete `user-scalable=no` and fix `maximum-scale` in that injected snippet, then save.
- Also check individual pages: Pages → (select a page) → gear icon → Advanced → Page Header Code Injection.
- If no custom injection exists and the default Squarespace tag is the problem, contact Squarespace Support.
How to fix meta viewport on Webflow
- In the Webflow Designer, open your Project Settings (gear icon at the top of the left panel or via the Dashboard).
- Go to the Custom Code tab.
- In the 'Head Code' field, look for any `<meta name="viewport">` tag and remove `user-scalable=no` / fix `maximum-scale`.
- Webflow's own injected viewport tag is compliant by default, so this fix usually only applies if a developer manually added a custom tag.
- Publish the site and test on a mobile device.
How to fix meta viewport on Adobe Commerce (Magento)
- Via SSH or FTP, navigate to your active theme directory: `app/design/frontend/<Vendor>/<theme>/Magento_Theme/layout/`.
- Open `default_head_blocks.xml` (or `default.xml`).
- Search for the viewport meta tag. Alternatively, check `app/design/frontend/<Vendor>/<theme>/Magento_Theme/templates/root.phtml`.
- Remove `user-scalable=no` and fix any `maximum-scale` value below 5 in the content attribute.
- If editing the base Luma theme, copy the file to your custom child theme first to preserve changes across upgrades.
- Run `bin/magento cache:flush` and test on mobile.
How to fix meta viewport on Magento Open Source
- Follow the same steps as Adobe Commerce (Magento) above — the theme file structure is identical.
- Edit `default_head_blocks.xml` or `root.phtml` within your custom theme, flush the cache with `bin/magento cache:flush`, and verify on a mobile device.
How to fix meta viewport on PrestaShop
- Via FTP or your hosting file manager, navigate to `themes/<your-theme>/templates/_partials/head.tpl`.
- Search for `meta name="viewport"` and remove `user-scalable=no` / correct `maximum-scale`.
- Save the file and clear PrestaShop's cache: Back Office → Advanced Parameters → Performance → Clear cache.
- Test on a mobile device.
How to fix meta viewport on OpenCart
- Via FTP, open `catalog/view/theme/<your-theme>/template/common/header.twig` (OpenCart 3+) or `header.tpl` (OpenCart 2).
- Find the `<meta name="viewport">` line and remove `user-scalable=no` / fix `maximum-scale`.
- Save and refresh your store on a mobile browser to confirm zoom works.
Does your site have this issue?
Run a free SEOLZ audit to find meta viewport — and every other issue — across your whole site in minutes.
Scan my site freeFrequently asked questions
What is Meta viewport?
The `<meta name="viewport">` tag in your site's HTML tells mobile browsers how to display your page. Two specific settings inside it — `user-scalable=no` and `maximum-scale=1` (or any value less than 5) — completely prevent visitors from pinching to zoom in on your content. This violates WCAG 2.1 Success Criterion 1.4.4 (Resize Text), which requires that text can be resized up to 200% without loss of content or functionality. Removing these restrictions restores the browser's built-in zoom capability and brings your site into compliance.
Why does meta viewport matter?
Millions of people with low vision, aging eyesight, or small screens rely on pinch-to-zoom to read text comfortably — disabling it makes your store actively unusable for them. From a legal standpoint, WCAG 1.4.4 is referenced in accessibility laws and regulations in the US (ADA), EU (EN 301 549), and UK (PSBAR), meaning a blocked zoom can expose you to discrimination complaints or lawsuits. On the SEO and conversion side, Google uses mobile usability as a ranking signal, and visitors who can't read your product descriptions will simply bounce — costing you sales. Fixing this is one of the fastest accessibility wins available: it's a single line of HTML.
How do I fix meta viewport?
Remove `user-scalable=no` (and any `maximum-scale` value below 5) from your site's `<meta name="viewport">` tag so visitors can pinch-to-zoom on mobile devices.
Authoritative references
- How to fix this specific rule — Deque/axe (rule reference)
- WCAG 2 overview — W3C WAI