How to add the viewport meta tag for mobile pages
The viewport meta tag makes a page render at the width of the device instead of a zoomed-out desktop layout. Without it, phones show a tiny shrunk page, and Google treats the page as not mobile friendly. Add one tag with width=device-width and initial-scale=1 to the head.
By ratemysite.ai editorial team. Updated .
How do you fix it?
- Open the head of your page template and look for a meta tag with name="viewport".
- Add <meta name="viewport" content="width=device-width, initial-scale=1"> if it is missing.
- Remove maximum-scale=1 and user-scalable=no so visitors can still pinch to zoom.
- Open the page on a real phone, or in browser developer tools, and confirm text is readable without zooming.
- Re-run the audit and confirm the Viewport check passes.
What is the viewport meta tag?
The viewport meta tag is an instruction in the page head that tells mobile browsers how wide to draw the page. When it is absent, many phones assume a desktop width of about 980 pixels and shrink the page to fit, which makes text far too small. With the tag set to the device width, a 390 pixel wide phone draws the page at 390 pixels and your responsive CSS can adapt the layout.
How do I check that my page is mobile friendly?
Start with the tag, then test the layout. Open the page on a real phone and look for text smaller than 16 pixels, buttons that are hard to tap and content that scrolls sideways. Over 60% of web traffic worldwide now comes from mobile devices, so these problems affect most visitors. Chrome developer tools has a device toolbar that simulates common phone sizes, and Lighthouse reports a failed viewport audit directly.
How much does this check matter?
- This check is worth about 1.9% of the overall score.
- A finished report is reused for 24 hours before you can re-analyze it.
- Each page is fetched with a timeout of 10 seconds, and HTML larger than 2 MB is not audited.
What else do people ask?
- Does the viewport tag affect SEO?
- Yes. Google indexes the mobile version of your pages first, so a page that does not fit a phone screen is judged on a poor experience.
- Why not block zooming?
- Disabling zoom fails accessibility guidelines and frustrates people with low vision. The default tag already gives a correct layout without blocking it.