Make pages display properly on phones (viewport meta tag)
Without a viewport tag, phones show your desktop layout zoomed out. One line in the page head fixes it, provided your layout is responsive.
The problem
Pages have no <meta name="viewport"> tag, so mobile browsers render them at desktop width.
How to spot it
On a phone, text is tiny and visitors must pinch and zoom to read or tap anything.
Why it matters
Most visits come from phones for many businesses. A page that is not mobile-ready is hard to use, and search engines primarily use the mobile version of pages.
What happens if you leave it
Visitors leave quickly, and buttons and forms become hard to use.
How to fix it
-
Add this inside
<head>on every page (usually in your theme's header template):<meta name="viewport" content="width=device-width, initial-scale=1"> -
Make sure your CSS is responsive: flexible widths, images that scale (
max-width: 100%) and media queries for small screens. -
Do not disable zoom (
user-scalable=noormaximum-scale=1); people with low vision need it.
Common mistakes
- Adding the tag to a fixed-width design without making the layout responsive. The page then looks cropped.
How to check the fix worked
Open the page on a phone, or use your browser's device emulation: text should be readable without zooming and no horizontal scrolling should be needed. Re-run the audit.
References and further reading
Related tutorials
Add alt text and dimensions to images
Describe meaningful images for screen readers and search engines, mark decorative ones correctly, and set widt...
Label form fields, name icon links and declare the page language
Three quick accessibility fixes: every form field needs a label, every link needs readable text, and every pag...