MediumMobileMeasured

Pinch-to-zoom turned off on phones

Your theme’s viewport tag stops shoppers zooming in, so on Android phones they can’t enlarge a product photo or small print.

Checked on: homepage · Zolvio’s check: “Pinch-to-zoom is turned off”

Why it costs you sales

Shoppers zoom in to look at a product photo’s details, to read small print such as ingredients or sizes, or to read the page at all. When the page stops zooming, a two-finger pinch does nothing and they’re left with the page at its own size.

The WCAG accessibility guidelines ask that text can be zoomed to 200% (success criterion 1.4.4), and tools such as Google’s Lighthouse flag a viewport tag that stops zooming.

How Zolvio detects it

Zolvio reads your homepage’s viewport tag (<meta name="viewport">) in a real browser. It usually comes from your theme’s layout (layout/theme.liquid), the same on every page, so only the homepage is checked. It’s flagged when the tag turns zooming off with user-scalable=no (or 0), or sets a maximum-scale under 2, which stops shoppers zooming further than that. The finding quotes the tag and says which browsers obey it.

Chrome on Android phones obeys both settings, and the browsers built into apps on iPhone, such as Instagram’s and Facebook’s, obey user-scalable=no. Safari on iPhones ignores both, so shoppers using it can still zoom.

It isn’t judged when the homepage loads UserWay’s accessibility widget (userway.org), which rewrites the viewport tag in the shopper’s browser so pinch-to-zoom works. The audit’s browser doesn’t load it.

This is a direct measurement, so it’s reported on every plan, including Free and audits with AI turned off. With AI review on, the AI agent also checks it against the audit’s evidence before it reaches your issue list.

How to fix it

  1. In Online Store → Themes → Edit code, open layout/theme.liquid and find the <meta name="viewport"> tag.
  2. Remove maximum-scale and user-scalable=no from it: content="width=device-width, initial-scale=1" is enough.
  3. Themes often add the setting to stop iPhones zooming into form fields. If fields zoom in on iPhones afterwards, set their text to 16px in the theme’s CSS instead.
  4. Check on an Android phone that a two-finger pinch zooms the page; a theme update can bring the old tag back.

In Zolvio: on paid plans with AI turned on, the guided fix writes these steps for your own store and theme: where to click in Shopify admin or the theme editor, or which file to open, the line to find and the code to add. Each file opens in Shopify’s code editor. Zolvio never edits your theme: you make the change, then Verify fix checks your published theme for code changes (or you mark it fixed), and later audits confirm the problem is gone.

Common questions

Why does “Pinch-to-zoom turned off on phones” cost a Shopify store sales?

Shoppers zoom in to look at a product photo’s details, to read small print such as ingredients or sizes, or to read the page at all. When the page stops zooming, a two-finger pinch does nothing and they’re left with the page at its own size. The WCAG accessibility guidelines ask that text can be zoomed to 200% (success criterion 1.4.4), and tools such as Google’s Lighthouse flag a viewport tag that stops zooming.

How does Zolvio detect “Pinch-to-zoom turned off on phones”?

Zolvio reads your homepage’s viewport tag (<meta name="viewport">) in a real browser. It usually comes from your theme’s layout (layout/theme.liquid), the same on every page, so only the homepage is checked. It’s flagged when the tag turns zooming off with user-scalable=no (or 0), or sets a maximum-scale under 2, which stops shoppers zooming further than that. The finding quotes the tag and says which browsers obey it. Chrome on Android phones obeys both settings, and the browsers built into apps on iPhone, such as Instagram’s and Facebook’s, obey user-scalable=no. Safari on iPhones ignores both, so shoppers using it can still zoom. It isn’t judged when the homepage loads UserWay’s accessibility widget (userway.org), which rewrites the viewport tag in the shopper’s browser so pinch-to-zoom works. The audit’s browser doesn’t load it.

How do I fix “Pinch-to-zoom turned off on phones” on Shopify?

In Online Store → Themes → Edit code, open layout/theme.liquid and find the <meta name="viewport"> tag. Remove maximum-scale and user-scalable=no from it: content="width=device-width, initial-scale=1" is enough. Themes often add the setting to stop iPhones zooming into form fields. If fields zoom in on iPhones afterwards, set their text to 16px in the theme’s CSS instead. Check on an Android phone that a two-finger pinch zooms the page; a theme update can bring the old tag back.

Related

Documentation

  • How audits work — What an audit scans and how findings become issues.
  • Guided fixes — Step-by-step fixes written for your theme, with links into the code editor.
  • Heatmaps — See where shoppers tap and how far they scroll, on mobile and desktop.