---
title: "Fit the page to the phone · Agent Wranglers"
url: https://agentwranglers.se/playbook/website/html-basics/meta-viewport
updated: 2026-10-20
licence: "All rights reserved"
---

# Fit the page to the phone

By Erik Bergstedt, Agent Wranglers. Updated 2026-10-20.

- Level: Required
- Chapter: [HTML basics](https://agentwranglers.se/playbook/website/html-basics)
- Rule: Add `<meta name="viewport" content="width=device-width, initial-scale=1">` to every page, and never turn off zooming.
- How: Put the viewport tag in the shared head. Never add `maximum-scale` or `user-scalable=no`.
- 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.

Example:

```html
<!-- 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">
```

**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`.

- Previous: [Declare UTF-8 first](https://agentwranglers.se/playbook/website/html-basics/meta-charset)
- Next: [Give every page its own title](https://agentwranglers.se/playbook/website/html-basics/title)
- [HTML basics](https://agentwranglers.se/playbook/website/html-basics)