How to fix mobile viewport on Adobe Commerce (Magento)
Confirm your store has a correct responsive viewport meta tag so it displays properly on phones and tablets.
Steps for Adobe Commerce (Magento)
- The viewport meta tag is output via your theme's layout XML and PHTML templates. Navigate to your theme directory: app/design/frontend/<Vendor>/<Theme>/.
- Open Magento_Theme/layout/default_head_blocks.xml (or the equivalent file in your theme). Look for a <meta name='viewport'> declaration.
- Alternatively, check app/design/frontend/<Vendor>/<Theme>/Magento_Theme/templates/root.phtml for a hardcoded viewport tag in the <head>.
- Ensure the content attribute reads exactly: width=device-width, initial-scale=1. Remove any user-scalable=no or maximum-scale restrictions.
- If the tag is missing, add it in default_head_blocks.xml using: <block class="Magento\Framework\View\Element\Html\Head\Meta" name="viewport"><arguments><argument name="content" xsi:type="string">width=device-width, initial-scale=1</argument></arguments></block>
- Run bin/magento cache:flush, then verify with Google's Mobile-Friendly Test.
<meta name="viewport" content="width=device-width, initial-scale=1">What is mobile viewport?
The viewport meta tag is a single line of HTML code that lives in the `<head>` of every page on your site. It tells mobile browsers how wide to render your page and how to scale it — essentially instructing phones and tablets to show your site at the right size instead of zooming way out and displaying a tiny desktop version. A correct responsive viewport tag looks like `<meta name="viewport" content="width=device-width, initial-scale=1">`. Without it, or with the wrong settings, your site can look broken, tiny, or unresponsive on mobile devices.
Google uses mobile-first indexing, meaning it primarily crawls and ranks your site based on how it looks and works on a mobile device. A missing or broken viewport tag signals to Google that your site is not mobile-friendly, which can directly suppress your rankings in search results. Beyond SEO, over half of all ecommerce traffic now comes from phones — a store that is hard to read or navigate on mobile loses customers at checkout, destroying conversion rates and revenue. Google's own Page Experience signals and Core Web Vitals scores also depend on correct mobile rendering, compounding the ranking impact.
See the complete Mobile viewport guide for every platform and the full background.
Not sure if your Adobe Commerce (Magento) store has this?
Run a free SEOLZ audit — we’ll find mobile viewport and every other issue across your whole site.
Scan my site free