Viewport meta tag
The viewport meta tag is the single HTML element that tells mobile browsers how to scale and lay out a page: `<meta name="viewport" content="width=device-width, initial-scale=1">`. Without it, the page renders at a desktop default width (~980px) and gets flagged as not mobile-friendly under mobile-first indexing.
Long definition
Mobile browsers default to a virtual viewport (~980 CSS pixels) so they can render desktop layouts without breaking them — they zoom out the result to fit the screen. The viewport meta tag overrides that default, telling the browser to use the device's actual width:
<meta name="viewport" content="width=device-width, initial-scale=1">
width=device-width matches the CSS viewport to the device's screen width. initial-scale=1 sets the zoom level so 1 CSS pixel = 1 device-independent pixel at load. With these two values, responsive CSS (@media (max-width: 768px)) starts working as designed.
This tag is checked directly by Google's mobile-friendliness assessment. A page without it triggers "Viewport not set" in PageSpeed Insights and Search Console's mobile usability report. Under mobile-first indexing — default for all sites since 2023 — Google indexes the mobile rendering of your page; a desktop-scaled mobile view is the version that gets indexed.
Other directives exist but most should be left alone:
maximum-scale=1,user-scalable=no— disable pinch-to-zoom. Avoid. WCAG 2.1 accessibility guidelines call this out as a failure for users with low vision who need to zoom. Modern iOS Safari ignores it anyway.viewport-fit=cover— for iPhone notch/dynamic-island devices. Use when designing edge-to-edge layouts that need to extend behind the notch, paired withsafe-area-inset-*CSS environment variables.interactive-widget— controls keyboard behavior on mobile. Niche.
The tag belongs in <head>, ideally near the top, and applies to the whole document. AMP pages already include it as part of the AMP boilerplate; standard pages have to declare it explicitly.
Common misconceptions
- "Responsive CSS works without the viewport tag." It doesn't. Without the tag, mobile browsers treat the viewport as ~980px wide, so
@media (max-width: 768px)never matches on a phone. The CSS is correct; the browser just never enters the breakpoint. - "You need different viewport tags for different devices." One tag covers all of them.
width=device-widthadapts to the actual device — phones, tablets, foldables, anything with a browser. - "Disabling zoom improves UX on a controlled design." It blocks accessibility for users who need to enlarge text. Keep zoom enabled. Design at the smallest reasonable text size and let users adjust.
- "It only affects mobile." It also affects how desktop browsers render at narrow widths and how some assistive technologies interpret the layout. Setting it correctly is part of any responsive baseline, not a mobile-only concern.
Continue exploring