Viewport meta tag

What is viewport meta tag?

The viewport meta tag is an HTML tag in the head of a page that tells mobile browsers how wide the layout should be and how to scale it. The standard value, width=device-width, initial-scale=1, makes the page as wide as the screen and starts it at normal zoom, so responsive CSS works.

Without the tag, most mobile browsers assume the page was built for a desktop and render it on a virtual canvas around 980 pixels wide, then shrink it to fit. Text becomes tiny, tap targets crowd together and people have to pinch and zoom. Your responsive CSS media queries also stop working as intended, which undermines page speed work and mobile layouts alike, because the browser reports the wide virtual width instead of the real screen width.

Why viewport meta tag matters for SEO

Google uses the mobile version of pages for indexing and ranking (mobile-first indexing), and a page that is not usable on a phone gives searchers a poor experience. Lighthouse checks for the tag in its SEO and best practices audits.

Avoid user-scalable=no and low maximum-scale values. Blocking zoom stops people with low vision from enlarging text, and accessibility checks flag it.

How to add a viewport meta tag

1. Add the tag once inside the <head> of every page template.
2. Use width=device-width, initial-scale=1 unless you have a specific reason not to.
3. Do not disable zoom with user-scalable=no or maximum-scale=1.
4. Test the page on a real phone or in your browser’s device mode to check that text is readable without zooming.

Viewport meta tag example

<meta name="viewport" content="width=device-width, initial-scale=1">