Lesson 2 / 26

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 to use the device width and a 1:1 initial scale, and it leaves pinch-zoom enabled for users.

<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.