Meta viewport
Quick winFound on 22% of audited stores.
Remove `user-scalable=no` (and any `maximum-scale` below 5) from your site's `<meta name="viewport">` tag so visitors can pinch-to-zoom on mobile devices.
What it is
Every web page typically includes a small HTML tag called the "viewport meta tag" that tells mobile browsers how to display the page. Two parameters inside that tag — `user-scalable=no` and `maximum-scale=1` (or any value less than 5) — completely prevent visitors from pinching to zoom in on your content. WCAG Success Criterion 1.4.4 ("Resize Text") requires that text can be resized up to 200% without losing content or functionality. Blocking zoom is a direct violation of that requirement. The fix is simply to delete those two parameters (or raise `maximum-scale` to at least 5) and let the browser's default zooming work normally.
Why it matters
Millions of people with low vision rely on pinch-to-zoom to read small text on mobile screens — including product descriptions, prices, checkout forms, and legal notices. Blocking zoom makes your store effectively unusable for those shoppers, causing lost conversions and cart abandonment. Beyond lost sales, WCAG 1.4.4 is referenced in accessibility laws in the US (ADA, Section 508), EU (EAA), UK (PSBAR), and elsewhere — meaning a blocked-zoom viewport tag is a documented, easy-to-prove accessibility violation that appears in demand letters and lawsuits with growing frequency. Fixing it takes less than five minutes and has zero negative impact on your site's design or performance.
How to fix it
- Open your site's main HTML template file (or the theme/settings area where the <head> section is managed).
- Search for the tag: <meta name="viewport" …>
- Locate and delete the `user-scalable=no` or `user-scalable=0` attribute if present.
- If `maximum-scale` is set to a value less than 5 (e.g. `maximum-scale=1`), either delete the parameter entirely or raise it to `maximum-scale=5`.
- Save and publish the change, then test on a real mobile device or browser DevTools by attempting to pinch-zoom the page.
- Re-run an accessibility scanner (e.g. axe DevTools browser extension) to confirm the meta-viewport rule now passes.
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 left file tree, open Layout → theme.liquid (this is the master HTML template).
- Use Ctrl+F / Cmd+F to search for 'viewport'.
- Find the <meta name="viewport" …> tag and remove `user-scalable=no` and/or change `maximum-scale` to 5 (or delete that parameter).
- Click Save. The fix is live immediately — no republishing needed.
How to fix meta viewport on Shopify Plus
- Follow the same steps as Shopify above — edit Layout → theme.liquid in the theme code editor.
- If your store uses a custom checkout or Checkout Extensibility, also check any checkout-specific liquid files (e.g. checkout.liquid if still available on your plan) for a separate viewport tag.
How to fix meta viewport on WooCommerce
- In your WordPress admin, go to Appearance → Theme File Editor (or use a code editor via SFTP).
- Open your active (child) theme's header.php file.
- Search for 'viewport' and edit the <meta name="viewport"> tag to remove `user-scalable=no` and fix `maximum-scale`.
- If you cannot find the tag in header.php, check your theme's functions.php — some themes inject it via wp_head hooks — or search all theme files for 'user-scalable'.
- Save the file. If using SFTP, upload the edited file to wp-content/themes/your-child-theme/header.php.
- Verify on mobile that pinch-zoom now works.
How to fix meta viewport on BigCommerce
- In your BigCommerce admin, go to Storefront → My Themes.
- Click Customize on your active theme, then select Edit Theme Files (Advanced).
- In the file tree, open templates/layout/base.html (the path may vary by theme — look for the file containing <head>).
- Search for 'viewport' and remove `user-scalable=no` / fix `maximum-scale`.
- Click Save & Apply to push the change live.
How to fix meta viewport on Wix
- Wix automatically injects the viewport meta tag; site owners cannot edit it directly via the editor.
- Open a support ticket with Wix or submit feedback requesting that they remove `user-scalable=no` from their generated viewport tag.
- If you use Wix Studio (formerly Editor X) with custom code: go to Site → Custom Code in the dashboard and check if any custom <head> snippet overrides the viewport — remove `user-scalable=no` from it if so.
- Monitor Wix platform release notes, as this is a known accessibility issue many Wix sites share and the platform periodically updates its output.
How to fix meta viewport on Wix Studio
- In Wix Studio, open your site dashboard and navigate to Settings → Custom Code.
- Check any code injected into the <head> section for a viewport meta tag with `user-scalable=no` — delete that parameter.
- If the problematic tag is coming from Wix's own generated markup (not your custom code), contact Wix Support, as platform-level HTML cannot be overridden by studio users.
How to fix meta viewport on Squarespace
- Squarespace injects the viewport tag at the platform level and does not expose it for direct editing.
- Go to Website → Pages → select any page → gear icon → Advanced → Page Header Code Injection.
- You can inject a corrected viewport tag here to override the platform default: <meta name="viewport" content="width=device-width, initial-scale=1"> — browsers use the last valid viewport tag, but browser behaviour varies; test carefully.
- Alternatively, contact Squarespace Support and report the accessibility issue so they can fix it platform-wide.
- Check your version: Squarespace 7.1 templates are more likely to have addressed this; 7.0 legacy templates may still include zoom-blocking attributes.
How to fix meta viewport on Webflow
- In the Webflow Designer, open Project Settings (the gear icon in the top toolbar).
- Go to the Custom Code tab.
- In the Head Code section, check whether a custom <meta name="viewport"> tag has been added — if it contains `user-scalable=no`, remove that parameter.
- Webflow's default platform-generated viewport tag does not include `user-scalable=no`, so if the issue exists it was likely added manually in custom code — simply delete or correct it.
- Publish your site after saving.
How to fix meta viewport on Adobe Commerce (Magento)
- Via SFTP or your server's file manager, locate the root layout file for your active theme: app/design/frontend/<Vendor>/<theme>/Magento_Theme/layout/default_head_blocks.xml or the base theme equivalent at vendor/magento/module-theme/view/frontend/layout/default_head_blocks.xml.
- Alternatively, search all theme files for 'user-scalable' to find where the viewport tag is set.
- Edit the relevant .phtml or layout XML file to remove `user-scalable=no` from the viewport content string.
- Run bin/magento cache:flush after saving to clear the full-page cache.
- Verify the change is live by viewing page source on mobile or in DevTools.
How to fix meta viewport on Magento Open Source
- Follow the same steps as Adobe Commerce above — the file structure and cache-flush command are identical for Magento Open Source.
How to fix meta viewport on PrestaShop
- Via FTP, navigate to themes/<your-theme>/templates/_partials/head.tpl (path may vary by theme version).
- Search for 'viewport' and edit the <meta name="viewport"> line to remove `user-scalable=no`.
- Save and upload. Clear the PrestaShop cache via Admin → Advanced Parameters → Performance → Clear cache.
How to fix meta viewport on OpenCart
- Via FTP, open catalog/view/theme/<your-theme>/template/common/header.twig (or header.tpl for older versions).
- Find the <meta name="viewport"> tag and remove `user-scalable=no`.
- Save and upload the file; clear OpenCart's cache via Admin → Dashboard → gear icon → Refresh.
How to fix meta viewport on Headless / Custom (I build in code)
- Search your codebase for 'user-scalable' — it will be in a layout/shell component, an _document.js / _app.js (Next.js), a nuxt.config (Nuxt.js), an index.html, or a <head> component.
- Remove `user-scalable=no` / `user-scalable=0` and either remove `maximum-scale` or set it to 5.
- For Next.js: edit the <Head> in pages/_document.js or use the next/head component in your layout.
- For Nuxt.js: edit the head.meta array in nuxt.config.js/ts.
- Deploy, then run axe DevTools or Lighthouse to confirm the rule passes.
Does your site have this issue?
Run a free SEOLZ scan to find meta viewport — and every other issue — across your whole site in minutes.
Scan my site freeFrequently asked questions
What is Meta viewport?
Every web page typically includes a small HTML tag called the "viewport meta tag" that tells mobile browsers how to display the page. Two parameters inside that tag — `user-scalable=no` and `maximum-scale=1` (or any value less than 5) — completely prevent visitors from pinching to zoom in on your content. WCAG Success Criterion 1.4.4 ("Resize Text") requires that text can be resized up to 200% without losing content or functionality. Blocking zoom is a direct violation of that requirement. The fix is simply to delete those two parameters (or raise `maximum-scale` to at least 5) and let the browser's default zooming work normally.
Why does meta viewport matter?
Millions of people with low vision rely on pinch-to-zoom to read small text on mobile screens — including product descriptions, prices, checkout forms, and legal notices. Blocking zoom makes your store effectively unusable for those shoppers, causing lost conversions and cart abandonment. Beyond lost sales, WCAG 1.4.4 is referenced in accessibility laws in the US (ADA, Section 508), EU (EAA), UK (PSBAR), and elsewhere — meaning a blocked-zoom viewport tag is a documented, easy-to-prove accessibility violation that appears in demand letters and lawsuits with growing frequency. Fixing it takes less than five minutes and has zero negative impact on your site's design or performance.
How do I fix meta viewport?
Remove `user-scalable=no` (and any `maximum-scale` 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