Key takeaways
- Every responsive page needs
<meta name="viewport" content="width=device-width, initial-scale=1">. - Without it, mobile browsers render the page as a ~980 px desktop layout and shrink it — tiny text and broken design.
- Don’t disable zooming (
user-scalable=no,maximum-scale=1) — it’s an accessibility failure.
If a site looks perfect on desktop but tiny and zoomed-out on a phone, the first thing to check is the viewport meta tag. It’s one line of HTML, and it decides whether your carefully written responsive CSS ever gets a chance to work.
What the viewport is#
The viewport is the visible area of a web page. On a desktop, it’s the browser window. Early smartphones faced a problem: most websites were designed for wide screens, so mobile browsers pretended to be about 980 pixels wide and zoomed out. That “virtual viewport” made old sites viewable, but it also means modern responsive sites must explicitly opt out of it.
The correct tag#
<meta name="viewport" content="width=device-width, initial-scale=1">width=device-width— make the layout viewport equal to the device’s screen width in CSS pixels (e.g. 390 px on many phones).initial-scale=1— start at 100% zoom.
Place it near the top of the <head>, right after the charset. See the HTML head tags guide for the full recommended order.
Before and after#
| Without the tag | With the tag |
|---|---|
| Page rendered at ~980 px and scaled down | Page rendered at the real device width |
| Media queries for small screens never trigger | Responsive CSS works as designed |
| Users must pinch-zoom to read | Text readable at normal size |
| Fails mobile-friendliness checks | Ready for mobile-first indexing |
Values to avoid#
user-scalable=noandmaximum-scale=1stop people zooming in. Users with low vision rely on zoom, and this fails WCAG accessibility guidelines. (iOS Safari ignores it for this reason.)- Fixed widths like
width=1024force a desktop-sized layout onto phones.
Need a hand with this?
Get a quick, honest review of your website’s SEO.
Useful extras#
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">viewport-fit=cover lets your design extend into the areas around notches and rounded corners on modern phones. Combine it with CSS env(safe-area-inset-*) padding so buttons aren’t hidden — this theme uses it for its app-style bottom navigation bar.
Common related mobile problems#
- Horizontal scrolling: usually an element wider than the screen — a fixed-width image, table, embed or long URL. Add
max-width: 100%to media and wrap tables. - Tiny text: use at least 16 px for body text; inputs under 16 px cause iOS to zoom on focus.
- Small tap targets: buttons and links should be around 44–48 px tall with spacing between them.
- 100vh issues: mobile browser toolbars change the visible height; use
dvhunits for full-screen sections.
For the CSS side, read responsive web design with CSS and CSS units explained.
Viewport meta tag FAQ#
Does WordPress add the viewport tag automatically?#
The theme is responsible for it. Almost all modern themes include it; check View Source if your site looks zoomed out on mobile.
Is the viewport tag a ranking factor?#
Not on its own, but without it your site isn’t mobile-friendly, which hurts user experience and page experience signals.
Should I set initial-scale to something other than 1?#
No — 1 is correct for responsive sites.