How to fix meta viewport on Magento Open Source

Steps for Magento Open Source

1. Follow the same steps as Adobe Commerce (Magento) above — the theme file structure is identical.
2. 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.

<meta name="viewport" content="width=device-width, initial-scale=1">

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.

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.

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