Mobile viewport

Quick win

Found on 2% of audited stores.

Add a responsive viewport meta tag to every page so mobile browsers render your site at the correct width and scale.

What it is

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.

Why it matters

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.

How to fix it

  1. Open the HTML source of any page on your site and search for a `<meta name="viewport">` tag inside the `<head>` element.
  2. If the tag is missing, add `<meta name="viewport" content="width=device-width, initial-scale=1">` as early as possible in the `<head>`, ideally before any CSS link tags.
  3. If the tag is present but contains `user-scalable=no` or `maximum-scale=1`, remove those attributes — they block pinch-to-zoom and trigger accessibility and Google mobile-usability failures.
  4. Save and publish the change, then reload the page on a real phone or use browser DevTools (toggle device toolbar) to confirm the layout renders at full width.
  5. Re-run Google's Mobile-Friendly Test (search 'Google Mobile-Friendly Test') to confirm the page passes.
  6. Check that the tag exists in every page template (homepage, collection/category, product, blog, checkout) — a single missed template will leave those pages broken on mobile.

Fix it on your platform

Pick your platform for the exact steps.

How to fix mobile viewport on Shopify
  1. In your Shopify admin, go to Online Store → Themes.
  2. Next to your active theme, click Actions → Edit code.
  3. In the file tree on the left, open Layout → theme.liquid (this is the master template wrapping every page).
  4. Search for `<meta name="viewport"`. If it exists, verify it reads exactly `<meta name="viewport" content="width=device-width, initial-scale=1">` and remove any `user-scalable=no` or `maximum-scale` restrictions.
  5. If the tag is missing, paste `<meta name="viewport" content="width=device-width, initial-scale=1">` immediately after the opening `<head>` tag.
  6. Click Save. All pages inherit this template, so the fix applies site-wide instantly.
Full Shopify guide →Official Shopify docs ↗
How to fix mobile viewport on Shopify Plus
  1. Follow the identical steps as Shopify above — the master template is still Online Store → Themes → Actions → Edit code → Layout/theme.liquid.
  2. If your store uses a custom storefront (Hydrogen/Headless), edit the root HTML shell file (e.g. root.tsx or _app.tsx) and add the meta tag inside the `<head>` component.
  3. For checkout extensibility, Shopify Plus injects the viewport tag automatically; no change needed there.
Full Shopify Plus guide →Official Shopify Plus docs ↗
How to fix mobile viewport on WooCommerce
  1. In your WordPress admin, go to Appearance → Theme File Editor (or use a child theme via FTP/SFTP).
  2. Open header.php in your active (child) theme.
  3. Search for `<meta name="viewport">`. Most modern themes include it; if yours does not, add `<meta name="viewport" content="width=device-width, initial-scale=1">` directly after `<head>` or inside the `wp_head()` hook.
  4. Alternatively, add it via a plugin: install 'Insert Headers and Footers' (WPCode), go to Code Snippets → Header, and paste the tag there — no theme file editing required.
  5. Save. Verify by viewing the page source on your phone or using Chrome DevTools device toolbar.
Full WooCommerce guide →Official WooCommerce docs ↗
How to fix mobile viewport on BigCommerce
  1. In your BigCommerce admin, go to Storefront → My Themes.
  2. Click Customize on your active theme, then select Edit Theme Files (Advanced).
  3. Open templates/layout/base.html (the master layout file).
  4. Search for `<meta name="viewport">`. Cornerstone and most marketplace themes already include it; confirm the content value is `width=device-width, initial-scale=1`.
  5. If missing, add `<meta name="viewport" content="width=device-width, initial-scale=1">` immediately after the `<head>` tag.
  6. Save and apply the theme. The change propagates to every page.
Full BigCommerce guide →Official BigCommerce docs ↗
How to fix mobile viewport on Wix
  1. Wix automatically injects `<meta name="viewport" content="width=device-width, initial-scale=1">` into every published site — you do not need to add it manually.
  2. If a mobile-friendly test still flags your site, ensure your site is not set to 'Desktop only': in the Wix Editor, check that the Mobile Editor is enabled (the phone icon in the top bar is not disabled).
  3. Use the Wix Mobile Editor to review and fix any layout issues that may cause the page to appear broken even when the tag is present.
  4. Re-run Google's Mobile-Friendly Test after confirming the Mobile Editor is active.
Full Wix guide →Official Wix docs ↗
How to fix mobile viewport on Wix Studio
  1. Wix Studio also injects the viewport meta tag automatically for all published sites.
  2. Ensure Responsive Design is enabled for your site (Studio sites are responsive by default; check under Site → Settings if in doubt).
  3. If custom HTML widgets or embedded iframes are used, check those embeds do not override or suppress the viewport tag in their own `<head>`.
  4. Publish and verify with Google's Mobile-Friendly Test.
Full Wix Studio guide →Official Wix Studio docs ↗
How to fix mobile viewport on Squarespace
  1. Squarespace injects the viewport meta tag automatically on all templates — no manual action is required.
  2. If you use Code Injection (Settings → Advanced → Code Injection → Header), verify you have not accidentally added a second conflicting viewport tag.
  3. Remove any duplicate or restrictive viewport meta tags from the Header code injection box.
  4. Save and verify on a mobile device.
Full Squarespace guide →Official Squarespace docs ↗
How to fix mobile viewport on Webflow
  1. Webflow adds the viewport meta tag automatically to all published sites.
  2. In the Webflow Designer, go to Page Settings (the gear icon on any page) → SEO tab → confirm no conflicting meta tags are entered in the Custom Code → Head Code field.
  3. For site-wide custom code, go to Project Settings → Custom Code → Head Code and check for any duplicate or conflicting viewport tags.
  4. Remove duplicates, publish, and verify with Chrome DevTools mobile emulation.
Full Webflow guide →Official Webflow docs ↗
How to fix mobile viewport on 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.
Full Adobe Commerce (Magento) guide →Official Adobe Commerce (Magento) docs ↗
How to fix mobile viewport on Magento Open Source
  1. Follow the identical steps as Adobe Commerce above — the file paths and cache flush commands are the same.
  2. If you are on an older Magento 2 version, check `vendor/magento/module-theme/view/frontend/layout/default_head_blocks.xml` for the default tag and override it in your custom theme rather than editing core files.
Full Magento Open Source guide →Official Magento Open Source docs ↗
How to fix mobile viewport on PrestaShop
  1. In your PrestaShop admin, go to Design → Theme & Logo → click 'Your current theme' to find the active theme name.
  2. Via FTP/SFTP, navigate to `themes/<your-theme>/templates/_partials/head.tpl`.
  3. Search for `meta name="viewport"`. If missing, add `<meta name="viewport" content="width=device-width, initial-scale=1">` inside the `<head>` block.
  4. Save, clear the PrestaShop cache under Advanced Parameters → Performance → Clear cache, and verify on mobile.
Full PrestaShop guide →Official PrestaShop docs ↗
How to fix mobile viewport on OpenCart
  1. Via FTP/SFTP, open `catalog/view/theme/<your-theme>/template/common/header.twig` (OpenCart 3+) or `header.tpl` (OpenCart 2).
  2. Search for `meta name="viewport"` and add it if missing: `<meta name="viewport" content="width=device-width, initial-scale=1">`.
  3. Save the file, then clear the OpenCart cache in Admin → Dashboard → the blue cog icon → Refresh.
  4. Verify the change on a mobile browser.
Full OpenCart guide →Official OpenCart docs ↗
How to fix mobile viewport on Headless / Custom (I build in code)
  1. Locate the root HTML shell or document component — e.g. `pages/_document.tsx` in Next.js, `app.html` in SvelteKit, `index.html` in a Vite/CRA app, or the root layout file in your framework.
  2. Add `<meta name="viewport" content="width=device-width, initial-scale=1">` inside the `<head>` element.
  3. In Next.js App Router, use the Metadata API instead: export a metadata object with `{ viewport: { width: 'device-width', initialScale: 1 } }` from your root layout.
  4. In Nuxt 3, set `viewport` inside `useHead()` or in `nuxt.config.ts` under `app.head.meta`.
  5. Redeploy and verify with `curl -s <your-url> | grep viewport` or Chrome DevTools.
Full Headless / Custom (I build in code) guide →Official Headless / Custom (I build in code) docs ↗

Does your site have this issue?

Run a free SEOLZ scan to find mobile viewport — and every other issue — across your whole site in minutes.

Scan my site free

Frequently asked questions

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.

Why does mobile viewport matter?

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.

How do I fix mobile viewport?

Add a responsive viewport meta tag to every page so mobile browsers render your site at the correct width and scale.

Related Site Lifecycle issues