What is the viewport meta tag?
Definition The viewport meta tag is an HTML element in the page head that tells mobile browsers how wide the layout viewport should be and how far the page may be zoomed. The standard value is <meta name="viewport" content="width=device-width, initial-scale=1">. Without the tag, Safari on iPhone and Chrome on Android lay the page out at 980 CSS px and shrink it to fit the screen.
How to fix it: The viewport meta tag: what it does and the one line you need
How does the viewport meta tag work?
Early phone browsers had to show sites built only for desktops, so they invented a virtual 980 px wide window and zoomed out. The viewport meta tag is how a page says "I'm built for small screens, use the real width". It's read only by mobile browsers; desktop browsers ignore it.
The content attribute is a comma-separated list:
width=device-width: the layout viewport equals the device's width in CSS pixels (for example 390 px). A number such aswidth=1024forces a fixed width, which is almost always wrong on phones.initial-scale=1: start at 100% zoom. It also keeps the page from zooming when a phone rotates to landscape.minimum-scale,maximum-scale,user-scalable: limit pinch-zoom. Leave them out: blocking zoom fails WCAG 1.4.4 Resize Text for people who need to enlarge text.viewport-fit=cover: lets the page extend under the notch and home indicator; you then pad content with safe area insets.interactive-widget: in Chromium browsers, controls whether the on-screen keyboard resizes the layout (resizes-content) or only the visual viewport (the default since Chrome 108).
Example
<!-- In <head>, once per page -->
<meta name="viewport" content="width=device-width, initial-scale=1">Avoid this version, which disables zoom:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">Other mistakes worth checking: two viewport tags on one page (often one from a theme and one from a plugin), a tag added by JavaScript after the page has rendered, and old extras such as shrink-to-fit=no, which only mattered in iOS 9 and can be dropped.
On iPhone vs Android
Since iOS 10, Safari lets people pinch-zoom even when user-scalable=no is set. Chrome on Android respects it unless the user turns on "force enable zoom" in its accessibility settings. So disabling zoom hurts Android users most, and gains nothing on iPhone.
How MobileCheck checks it
MobileCheck flags three problems with this tag: no viewport meta tag at all (the phone renders a roughly 980 px desktop layout and shrinks it), a fixed width instead of width=device-width, and zoom disabled with user-scalable=no or a maximum-scale below 2.
Related terms
Guides and tools
- The viewport meta tag: what it does and the one line you need
- Why you should not disable zoom
- What is my viewport