The viewport meta tag: make your store render properly on phones

The viewport meta tag tells a phone to render the page at the width of the screen. Without it, mobile browsers pretend the screen is about 980 pixels wide and shrink the page to fit, which makes text tiny and buttons impossible to tap. Every modern theme includes it, so a failure here usually means a custom or broken template.

Why it matters

Most store visits come from phones. A page without the tag looks like a postage stamp copy of the desktop site, and shoppers leave. It is also a basic mobile-friendliness signal for search engines.

What the audit looks at

The audit reads the head of the home and product pages and checks for a viewport meta tag with a width set to the device width.

What usually causes it

• A custom theme or landing page template built without the tag
• A page builder output that omits it
• A plugin or optimisation tool that strips tags from the head
• A legacy theme never updated for mobile

How to fix it

Add the viewport meta tag. The effort is small, usually a setting or a paste and under 30 minutes.

1. Put in the head.
2. Without it, phones render the page at desktop width and scale it down, so everything is unreadably small.

How to check it yourself

1. View the page source and search for name="viewport".
2. Open the page on a phone and see whether text is readable without zooming.
3. In Chrome DevTools, switch on the device toolbar and test a few screen sizes.

Frequently asked questions

What should the tag say?

The standard line is .

Can I add it myself?

On most platforms it belongs in the theme head file. If you are unsure, ask your theme developer.

Related checks

• Title tags and meta descriptions for store pages: length, content and what to avoid
• Add to cart buttons: what makes shoppers find and use them
• Alt text for product images: how to write it for shoppers and search