How to fix mobile viewport on Adobe Commerce (Magento)

Steps for Adobe Commerce (Magento)

1. SSH into your server and navigate to your active theme directory: `app/design/frontend/<Vendor>/<theme>/Magento_Theme/layout/`.
2. Open (or create) `default_head_blocks.xml`.
3. Add the viewport meta tag using the layout XML instruction shown in the code snippets.
4. Alternatively, edit your theme's `app/design/frontend/<Vendor>/<theme>/Magento_Theme/templates/root.phtml` and add the tag directly in the `<head>` section.
5. Run `bin/magento cache:flush` and `bin/magento setup:static-content:deploy` to apply the change.
6. Verify on a mobile device or Chrome DevTools.

What is mobile viewport?

The viewport meta tag is a single line of HTML code placed in the `<head>` of every page. It tells mobile browsers (phones, tablets) how wide to display your site and whether to let visitors pinch-to-zoom. Without it, mobile browsers assume your site is a full desktop page — usually 980px wide — and shrink everything down to fit the screen, making text tiny and buttons nearly impossible to tap. Adding `<meta name="viewport" content="width=device-width, initial-scale=1">` tells the browser to match the device's actual screen width and show your content at a normal, readable size.

Google uses mobile-first indexing, meaning it primarily crawls and ranks your site based on its mobile version. A missing or broken viewport tag signals to Google that your site is not mobile-friendly, which directly suppresses your rankings in search results — especially for the majority of shoppers who search on their phones. Beyond rankings, a site that renders incorrectly on mobile produces a poor user experience: visitors can't read product descriptions, miss calls-to-action, and abandon their carts. Google's own PageSpeed and Core Web Vitals scoring also penalises pages that fail basic mobile usability checks, compounding the ranking impact.

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