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

Syntax

css

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

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.

Note:

Accepted values:
width=device-width — match the device width
initial-scale=1 — start at 100% zoom
minimum-scale | maximum-scale — zoom limits
user-scalable=yes | no — pinch zoom allowed or not

Example: The Viewport Meta Tag

css

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    body { font-family: sans-serif; }
    .box { background: #cfe8ff; border: 2px solid #1e6fd9; padding: 16px; }
  </style>
</head>
<body>
  <div class="box">Overrides the default 980px desktop-width mobile layout</div>
</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.

Note:

Accepted values:
width=device-width — layout viewport equals the device width
width=<pixels> — fixed layout width
height=device-height — rarely needed
note: use width=device-width in almost every site

Example: width=device-width

css

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width">
  <style>
    body { font-family: sans-serif; }
    .box { background: #cfe8ff; border: 2px solid #1e6fd9; padding: 16px; }
  </style>
</head>
<body>
  <div class="box">Layout width matches the device width</div>
</body>
</html>

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.

Note:

Accepted values:
initial-scale=1 — no zoom, 100%
initial-scale=<number> — starting zoom level
minimum-scale=<number> — lowest zoom
maximum-scale=<number> — highest zoom

Example: initial-scale=1

css

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    body { font-family: sans-serif; }
    .box { background: #cfe8ff; border: 2px solid #1e6fd9; padding: 16px; }
  </style>
</head>
<body>
  <div class="box">Initial zoom level is 1 (no zoom)</div>
</body>
</html>

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.

Note:

Accepted values:
user-scalable=yes | no — allow pinch zoom
maximum-scale=<number> — highest zoom
minimum-scale=<number> — lowest zoom
viewport-fit=cover — extend into notched displays
note: avoid user-scalable=no for accessibility

Example: Additional Viewport Controls

css

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <style>
    body { font-family: sans-serif; }
    .box { background: #cfe8ff; border: 2px solid #1e6fd9; padding: 16px; }
  </style>
</head>
<body>
  <div class="box">user-scalable=no blocks pinch zoom (avoid: hurts accessibility)</div>
</body>
</html>

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 -->
<!DOCTYPE html>
<html>
<head>
  <title>Page missing a viewport tag</title>
  <style>
    .box { background: #ffd6d6; border: 2px solid #d33; padding: 16px; font-family: sans-serif; }
  </style>
</head>
<body>
  <div class="box">No viewport meta: phones render this at ~980px and shrink it</div>
</body>
</html>

Live Example

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

CSS RWD Viewport

The Viewport Meta Tag

width=device-width

initial-scale=1

Additional Viewport Controls

Debugging a Missing Viewport Tag

Chapter Quiz — Complete all 8 topics to unlock

Login to run this code