01
The correct tag
Put this inside <head> on every page:
<meta name="viewport" content="width=device-width, initial-scale=1">02
Mistakes to avoid
- user-scalable=no or maximum-scale=1: stops people zooming, which fails accessibility guidelines (WCAG 1.4.4). Leave zoom on.
- A fixed width such as width=1024: phones render a 1024px page and shrink it, the same as having no tag.
- Adding the tag in JavaScript after load: the page first renders zoomed out, then jumps.
- Missing on some templates: blog posts, landing pages or checkout steps built from a different template often lack it.
03
After adding it, check the layout
Once phones render at their real width, any element with a fixed desktop width will now stick out and make the page scroll sideways. That is not the tag’s fault; those elements were always too wide. Fix them with max-width: 100% and flexible layouts.
04
How to test
View the page source and search for name="viewport", then open the page on a real phone or in device mode at 360px. Text should be readable without zooming and nothing should scroll sideways.
Checklist
Questions
What happens without a viewport meta tag?
Phones render the page at about 980px wide and shrink it to the screen, so text is tiny and mobile styles never apply.
Should I use user-scalable=no?
No. Blocking zoom makes the page hard to read for many people and fails accessibility guidelines.
Does the viewport tag affect SEO?
Yes. Google indexes the mobile version of pages, and a page without it is not mobile friendly.