Add <meta name="viewport" content="width=device-width, initial-scale=1"> to the head of every page. It tells mobile browsers to use the real width of the device as the layout width. Without it, phones lay the page out on a much wider virtual screen and shrink it, so your responsive CSS never applies.
Why a page can look tiny on a phone
Mobile browsers were built for sites designed for desktops. When a page has no viewport meta tag, they lay it out on a wide virtual viewport (traditionally around 980 CSS pixels) and scale the result down to fit the screen. Your media queries then see a wide viewport, so your mobile layout never triggers.
The line to use
This is the default recommendation:
- <meta name="viewport" content="width=device-width, initial-scale=1">
Options worth knowing
- width=device-width: the layout width equals the device width in CSS pixels.
- initial-scale=1: no zoom on first load.
- viewport-fit=cover: lets your page extend under the notch or rounded corners; combine it with env(safe-area-inset-*) padding.
- Avoid maximum-scale=1 and user-scalable=no: they stop people from zooming, which is an accessibility problem.
Frameworks add it for you, but check
Most starters include the tag. It is still worth looking at your phone-sized preview once: if the page looks like a shrunken desktop site, the tag is missing or overridden.
Frequently asked questions
- What is the best viewport meta tag?
- width=device-width, initial-scale=1 is the standard choice for responsive pages.
- Why does my site look zoomed out on a phone?
- The viewport meta tag is probably missing. Without it, mobile browsers lay the page out on a wider virtual viewport and scale it down.
- Should I disable zooming?
- No. Avoid user-scalable=no and maximum-scale=1: they prevent people from zooming, which hurts accessibility.
Install Mobile Preview from the Visual Studio Marketplace · Open VSX (Cursor, Windsurf, VSCodium) · Pricing
More: all guides · device sizes · 100vh on mobile: why it overflows and how to fix it with dvh · Safe areas in CSS: avoid the notch and the Dynamic Island · Tailwind breakpoints vs real phones and tablets · A mobile checklist for AI-generated UI (what usually breaks first) · How to make a phone mockup screenshot of your website (free)