SEOLZ

Mobile viewport

Quick win

Found on 12% of audited stores.

Confirm your store has a correct responsive viewport meta tag so it displays properly on phones and tablets.

What it is

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.

Why it matters

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.

How to fix it

  1. Verify your current viewport tag by opening any page on your store, right-clicking, choosing 'View Page Source', and searching for 'viewport'. You should see exactly: <meta name="viewport" content="width=device-width, initial-scale=1">.
  2. If the tag is missing entirely, add it inside the <head> section of your site's main HTML template.
  3. If the tag exists but has restrictive settings — such as 'user-scalable=no', 'maximum-scale=1', or a fixed numeric width like 'width=980' — remove those restrictions, as they prevent proper mobile scaling and harm accessibility.
  4. Use Google's Mobile-Friendly Test (search.google.com/test/mobile-friendly) to confirm the page passes after your change.
  5. Check two or three representative pages (homepage, a product page, the cart) to ensure the tag is present globally and not just on one template.
  6. Re-crawl or request indexing via Google Search Console to let Google pick up the corrected mobile rendering quickly.
<meta name="viewport" content="width=device-width, initial-scale=1">

Fix it on your platform

Pick your platform for the exact steps.

How to fix mobile viewport on Shopify
  1. Go to Online Store → Themes in your Shopify Admin.
  2. Click the '...' (Actions) button next to your active theme and select 'Edit code'.
  3. In the Layout folder on the left, click 'theme.liquid'.
  4. Search (Ctrl+F / Cmd+F) for 'viewport'. Most Shopify themes already include the correct tag inside the <head> section.
  5. If missing, add <meta name="viewport" content="width=device-width, initial-scale=1"> on a new line directly after the opening <head> tag.
  6. If it exists but has 'user-scalable=no' or 'maximum-scale=1', remove those values so only 'width=device-width, initial-scale=1' remains.
  7. Click 'Save'. Preview on a mobile device or use Google's Mobile-Friendly Test to verify.
Full Shopify guide →Official Shopify 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. Select your active (child) theme in the right-hand dropdown and open 'header.php'.
  3. Search for 'viewport'. Most modern WordPress/WooCommerce themes include it automatically.
  4. If missing, add <meta name="viewport" content="width=device-width, initial-scale=1"> inside the <head> tag, ideally before any stylesheet links.
  5. Alternatively, if your theme uses a functions.php hook system, you can add it via wp_head() action: add_action('wp_head', function(){ echo '<meta name="viewport" content="width=device-width, initial-scale=1">'; }, 1);
  6. Save and verify with Google's Mobile-Friendly Test.
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 'Advanced' → 'Edit Theme Files' on your active theme (or download and edit locally).
  3. Open templates/layout/base.html (the path may vary slightly by theme framework).
  4. Search for 'viewport'. Cornerstone and most BigCommerce themes include the correct tag by default.
  5. If missing or incorrect, add/correct the tag inside the <head> section: <meta name="viewport" content="width=device-width, initial-scale=1">.
  6. Save and publish. Use Google's Mobile-Friendly Test to confirm.
Full BigCommerce guide →Official BigCommerce docs ↗
How to fix mobile viewport on Wix
  1. Wix automatically injects a correct responsive viewport meta tag on all sites — you do not need to add it manually.
  2. If your site was built in Wix's legacy non-responsive (classic) editor, go to your Wix Dashboard → Settings → Mobile Optimization and enable the mobile view.
  3. For best results, switch to a Wix ADI or Wix Editor X (now Wix Studio) template, which are built responsive by default and output the correct viewport tag.
  4. Use Google's Mobile-Friendly Test on your live Wix URL to confirm the tag is present and the site passes.
Full Wix guide →Official Wix docs ↗
How to fix mobile viewport on Squarespace
  1. Squarespace automatically outputs the correct responsive viewport meta tag on all templates — no manual action is needed.
  2. If you have injected custom code via Settings → Advanced → Code Injection that overrides or duplicates the viewport tag, review and remove any conflicting entries in the 'Header' injection box.
  3. Confirm by viewing your page source and searching for 'viewport', or run Google's Mobile-Friendly Test on your live URL.
Full Squarespace guide →Official Squarespace docs ↗
How to fix mobile viewport on Webflow
  1. Webflow automatically includes the correct responsive viewport meta tag on all published projects.
  2. To verify or customize: open your Project Settings in the Webflow Designer, go to the 'Custom Code' tab, and check the 'Head Code' section for any conflicting or duplicate viewport tags.
  3. Remove any custom viewport tags that conflict with Webflow's default (e.g., ones with 'user-scalable=no'), and leave Webflow to render the correct tag automatically.
  4. Publish the project and confirm with Google's Mobile-Friendly Test.
Full Webflow guide →Official Webflow docs ↗
How to fix mobile viewport on Adobe Commerce (Magento)
  1. 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>/.
  2. Open Magento_Theme/layout/default_head_blocks.xml (or the equivalent file in your theme). Look for a <meta name='viewport'> declaration.
  3. Alternatively, check app/design/frontend/<Vendor>/<Theme>/Magento_Theme/templates/root.phtml for a hardcoded viewport tag in the <head>.
  4. Ensure the content attribute reads exactly: width=device-width, initial-scale=1. Remove any user-scalable=no or maximum-scale restrictions.
  5. 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>
  6. Run bin/magento cache:flush, then verify with Google's Mobile-Friendly Test.
Full Adobe Commerce (Magento) guide →Official Adobe Commerce (Magento) docs ↗
How to fix mobile viewport on Wix Studio
  1. Wix Studio (the successor to Editor X) automatically outputs a correct responsive viewport meta tag — no manual configuration is required.
  2. Ensure you are not injecting a conflicting viewport tag via the site's Custom Code panel (Wix Studio Dashboard → Settings → Custom Code).
  3. Verify your live site passes Google's Mobile-Friendly Test.
Full Wix Studio guide →Official Wix Studio docs ↗
How to fix mobile viewport on PrestaShop
  1. Open your active theme directory on your server: themes/<your-theme>/templates/_partials/head.tpl (or head.thtml depending on theme version).
  2. Search for 'viewport'. Add or correct the tag inside the <head> block: <meta name="viewport" content="width=device-width, initial-scale=1">.
  3. Clear PrestaShop's template cache under Advanced Parameters → Performance → Clear cache.
  4. Verify with Google's Mobile-Friendly Test.
Full PrestaShop guide →Official PrestaShop docs ↗
How to fix mobile viewport on OpenCart
  1. Locate your theme's header template, typically at catalog/view/theme/<your-theme>/template/common/header.twig (OpenCart 3+) or header.tpl (older versions).
  2. Search for 'viewport'. Add the correct tag in the <head> section if missing: <meta name="viewport" content="width=device-width, initial-scale=1">.
  3. Save the file and clear OpenCart's cache via Admin → Dashboard → the blue refresh button, or by deleting contents of system/storage/cache/.
  4. Verify with Google's Mobile-Friendly Test.
Full OpenCart guide →Official OpenCart docs ↗

Does your site have this issue?

Run a free SEOLZ audit 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 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.

Why does mobile viewport matter?

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.

How do I fix mobile viewport?

Confirm your store has a correct responsive viewport meta tag so it displays properly on phones and tablets.

Related Site Lifecycle issues