The viewport meta tag and mobile rendering

Every responsive page needs one line in its <head>: the viewport meta tag. Without it, mobile browsers pretend the screen is much wider than it is, and all your responsive CSS is ignored.

The tag you need

Add this inside <head> on every page:

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

That is the whole recommended setup. Here it is in a complete document:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Responsive page</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Hello, small screens</h1>
</body>
</html>

Why pages look tiny without it

When smartphones first arrived, almost every site was designed for desktop screens around 1000 pixels wide. To show those sites at all, mobile browsers adopted a trick: they lay out the page as if the screen were wide, typically about 980 CSS pixels, and then shrink the result to fit the physical screen.

That is why a page without a viewport tag looks like a miniature desktop page on a phone. The text is unreadable until you pinch to zoom. Worse, your media queries see a width of around 980 pixels, so the small-screen styles you wrote never apply.

The viewport meta tag switches that trick off. It tells the browser: this page is designed to adapt, so make the layout width equal to the device's width.

What each part means

You do not need anything else in normal use.

CSS pixels are not device pixels

A modern phone might have a screen more than 1000 physical pixels wide, yet report a viewport of around 390 CSS pixels. The ratio between the two is the device pixel ratio. High-density screens use two or three physical pixels per CSS pixel to draw sharper text.

Your CSS always works in CSS pixels. A 16px font looks roughly the same physical size on a phone and on a laptop because of this mapping. You will use the device pixel ratio again in lesson 5, when choosing image sizes.

Layout viewport and visual viewport

Mobile browsers track two viewports:

• The layout viewport is the area the page is laid out in. Media queries and vw units are based on it.
• The visual viewport is the part currently visible on screen. When a user pinches to zoom, the visual viewport gets smaller, but the layout viewport stays the same.

This distinction explains why pinch zoom does not trigger your media queries, while desktop browser zoom (Ctrl and plus, or Cmd and plus) does. Desktop zoom makes each CSS pixel larger, so fewer CSS pixels fit across the window and the layout viewport really does shrink.

Never disable zoom

You will find older tutorials and templates that include extra settings like these:

<!-- Harmful: do not use -->
<meta name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

user-scalable=no tries to block pinch zoom completely. maximum-scale=1 stops the user zooming beyond 100 percent, which has the same effect. Both are accessibility failures.

Many people rely on zoom to read: people with low vision, older users, anyone reading a small chart or a photo of a document. WCAG success criterion 1.4.4 Resize Text requires that text can be resized up to 200 percent without losing content or function. Blocking zoom works against that requirement.

Some mobile browsers now ignore these settings by default because so many sites misused them. You should still never write them, because you cannot rely on every browser overriding them.

"But iOS zooms in on my form fields"

A common reason developers disable zoom is that iOS Safari zooms in automatically when a user focuses a form field whose font size is smaller than 16 pixels. The fix is to give inputs a large enough font size, not to remove zoom:

input,
select,
textarea {
  font-size: max(16px, 1rem);
}

max() uses whichever value is larger, so inputs are never below 16 pixels and still grow if the user's default font size is bigger.

Other content values you may see

Handling notched screens

If you use viewport-fit=cover, the page can draw behind the notch and rounded corners. Keep text and controls clear of them with the env() function:

.site-header {
  padding-inline: max(1rem, env(safe-area-inset-left), env(safe-area-inset-right));
}

On screens without safe areas, env() returns 0px and the padding stays at 1rem.

Check your page

1. Open the page in your browser and switch on device emulation in DevTools.
2. Choose a phone-sized viewport. The text should be readable without zooming.
3. Remove the meta tag temporarily and reload. The page should shrink to a miniature desktop layout. Put the tag back.
4. On a real phone, confirm that pinch zoom works.

Summary

• Add <meta name="viewport" content="width=device-width, initial-scale=1"> to every page.
• Without it, mobile browsers lay out pages at a wide default width and shrink them, so your media queries do not apply.
• Media queries and vw units use the layout viewport; pinch zoom only changes the visual viewport.
• Never use user-scalable=no or a low maximum-scale. Users must be able to zoom.
• Stop iOS from zooming into form fields by giving them a font size of at least 16 pixels.

In the next lesson you will start writing CSS the mobile-first way.