CSS RWD Viewport

Without telling a phone browser what "the screen" actually means, it quietly renders your page as if it were a shrunken desktop monitor -- the viewport meta tag is the one line of HTML that turns that off.

In this page:

The Viewport Meta Tag
width=device-width
initial-scale=1
Additional Viewport Controls
Debugging a Missing Viewport Tag

The Viewport Meta Tag

Mobile browsers default to laying out pages at a virtual desktop-like width (often 980px) and then scaling the whole result down to fit the physical screen, which makes text unreadably tiny. The <meta name="viewport"> tag overrides this default behavior entirely.

Example: The Viewport Meta Tag

css

<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <p>Overrides the default 980px desktop-width mobile layout</p>
</body>
</html>

width=device-width

Setting width=device-width tells the browser to use the actual physical pixel width of the device as the CSS viewport width, so a 375px-wide phone screen is treated as 375px in your CSS rather than a scaled-down slice of an imaginary 980px page.

Example: width=device-width

css

<head>
  <meta name="viewport" content="width=device-width">
</head>

initial-scale=1

The initial-scale=1 value sets the initial zoom level to 1:1 between CSS pixels and device pixels, so the page loads at its true intended size instead of already zoomed out. Omitting it commonly causes pages to load pre-zoomed even with device-width set.

Example: initial-scale=1

css

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

Additional Viewport Controls

Other viewport properties exist -- maximum-scale, minimum-scale, and user-scalable=no -- but restricting zoom is an accessibility anti-pattern since some users rely on pinch-zoom to read small text, so these should be used sparingly if at all.

Example: Additional Viewport Controls

css

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
</head>

Debugging a Missing Viewport Tag

A page with correct responsive CSS but no viewport tag will still look broken on real devices -- the classic symptom is a page that looks perfect in desktop DevTools' mobile emulator (which sets the viewport automatically) but tiny and zoomed-out on an actual phone.

Example: Debugging a Missing Viewport Tag

css

<!-- Without a viewport tag: looks correct in desktop DevTools' mobile emulator, but tiny and zoomed-out on a real phone -->
<head>
  <title>Page missing a viewport tag</title>
</head>

🔒

Chapter Quiz — Complete all 8 topics to unlock

0/8 topics done

Complete these topics first:

← Previous Lesson CSS RWD Introduction Next Lesson → CSS RWD Grid View