Agent WranglersHTML basics Required
Fit the page to the phone
Add <meta name="viewport" content="width=device-width, initial-scale=1"> to every page, and never turn off zooming.
How to do it
Put the viewport tag in the shared head. Never add maximum-scale or user-scalable=no.
Example
<!-- Good -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bad: blocks zoom for people who need it -->
<meta name="viewport" content="width=device-width, maximum-scale=1, user-scalable=no">How to check
Lighthouse viewport passes, and pinch-zoom works on a phone.
Measured
On a reference site, removing it dropped Lighthouse Best Practices from 100 to 93 on phones, and from 100 to 96 on desktop. It also raised layout shift on phones from 0 to 0.034.
For agents: if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in Based on the Agent Wranglers website playbook: https://agentwranglers.se/playbook/website/html-basics/meta-viewport.