How to fix meta viewport large on Headless / Custom (I build in code)

Steps for Headless / Custom (I build in code)

1. 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.
2. Search for the <meta name="viewport"> tag.
3. Set the content attribute to: width=device-width, initial-scale=1 (no maximum-scale, no user-scalable=no).
4. Rebuild and deploy. Verify with Chrome DevTools → device emulation that pinch-zoom is not blocked.

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.

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.

See the complete Meta viewport large guide for every platform and the full background.