Lesson 2 / 25

Viewport & meta tags

Tell browsers how to render your page on mobile with the viewport meta tag — the first step to responsive design.

Why viewport matters

By default, mobile browsers assume a desktop-width viewport (~980px) and zoom out. Without the viewport meta tag, your responsive CSS won't work as expected. The tag tells the browser to match the device width instead.

The essential viewport tag

Always place this in your <head>. It tells mobile browsers: use device width, no zooming by default, scale everything at 1:1.

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- Other meta tags -->
  <meta charset="UTF-8">
  <meta name="description" content="Page description">
</head>

Common mistakes

❌ Omitting the viewport tag entirely. ❌ Setting initial-scale=2.0 or preventing zoom. ❌ Using fixed viewport width like width=1000px. ✓ Always use width=device-width, initial-scale=1.0.