How to set the mobile viewport meta tag

The viewport meta tag tells phones to fit the page to the screen width instead of showing a zoomed-out desktop page.

Why it matters

Google indexes the mobile version of your site first. Without a viewport tag, phones render the page as if on a ~980 px wide screen, so text is tiny and buttons are hard to tap.

Disabling zoom (user-scalable=no or maximum-scale=1) stops people with low vision from enlarging text, which fails accessibility guidelines.

How to fix it

1. Add the viewport meta tag to the <head> of every page.
2. Remove user-scalable=no and any maximum-scale below 5.
3. Check your layout on a real phone or in your browser’s device mode.

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