The viewport meta tag: a complete guide

If your website looks like a tiny, zoomed-out desktop page on a phone, one missing line is almost certainly the reason. Here's what that line does and how to get it exactly right.

The one line every page needs

<meta name="viewport" content="width=device-width, initial-scale=1">

Put it inside <head> on every page. That's it for most sites.

What happens without it

Phones were designed to show websites built for desktops. Without a viewport tag, mobile browsers assume your page is about 980px wide, lay it out at that width, then shrink the whole thing to fit the screen. Your carefully written media queries never fire, because as far as CSS is concerned the screen is 980px wide.

You can see this instantly in AKCLNT Responsive Checker: if every phone frame shows the desktop layout with microscopic text, the tag is missing.

What each part means

Settings you should not use

<!-- ✕ Don't do this -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

• user-scalable=no and maximum-scale=1 stop people from zooming. That fails accessibility guidelines (WCAG 1.4.4 Resize Text), and Safari on iOS ignores it anyway.
• A fixed width like width=1024 forces a desktop layout on every phone.
• initial-scale values other than 1 make the page start zoomed in or out.

Edge-to-edge layouts with viewport-fit=cover

By default, iPhones with a notch or Dynamic Island keep your page inside a "safe" rectangle and fill the rest with your background colour. For a true edge-to-edge design, opt in and pad with the safe-area insets:

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

<style>
header { padding-top: env(safe-area-inset-top); }
footer { padding-bottom: env(safe-area-inset-bottom); }
body   { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
</style>

Full details are in the safe area & notch guide.

Frameworks

// Next.js (App Router) — app/layout.tsx
export const viewport = { width: 'device-width', initialScale: 1 };

{{-- Laravel Blade — resources/views/layouts/app.blade.php --}}
<meta name="viewport" content="width=device-width, initial-scale=1">

WordPress themes, Vite, Create React App, Angular and Nuxt templates include the tag by default. If you see a desktop layout on phones anyway, check that a plugin or custom template hasn't removed or duplicated it — view the page source and search for viewport.

Check it

Load your site on a few phones in AKCLNT Responsive Checker. Text should be readable without zooming, and the layout should switch to your mobile design. Then tick Correct mobile scale in the checklist.

FAQ

What viewport meta tag should I use?

For almost every site: <meta name="viewport" content="width=device-width, initial-scale=1">. Add viewport-fit=cover only if you handle safe-area insets in CSS.

Should I use user-scalable=no?

No. Blocking zoom is an accessibility failure for people who need to enlarge text, and modern iOS ignores it anyway. Fix the layout instead of disabling zoom.

Why does my site look tiny on mobile?

The viewport meta tag is missing, so the phone renders the page at a desktop width of about 980px and shrinks it to fit the screen.