Viewport meta
Learn the relationship between the HTML viewport meta and CSS.
What is responsive design?
Responsive design keeps a page readable on phones, tablets and desktops. The HTML stays the same; only the CSS changes with the screen width.
Two pieces make this work: a <meta name="viewport"> tag that sets the viewport, and @media blocks that change styles by screen width. This lesson covers the meta tag first.
The viewport meta tag
The viewport tag goes in the HTML <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">This line tells the browser: match the page width to the real device width, and start zoom at 100%. Without it, phones pretend the page is about 980px wide and shrink it; the result is unreadable on a phone.
Two key values
Two values inside content matter:
- width=device-width: matches the page width to the device's real pixel width.
- initial-scale=1: starts zoom at 100%, no default zoom applied.
Together they give a readable starting point on phones. width=device-width alone works in most cases; initial-scale=1 adds consistency on Android.
Test yourself
-
The page looks too small on a phone — what is missing?
- The viewport meta tag is missing
- The CSS file is loaded locally instead of from a CDN
- The HTML file has no lang attribute
- Colors use rgb instead of hex
Show answer
The viewport meta tag is missing — Correct. Without a viewport meta tag, the browser renders the page at desktop width and shrinks it.
-
Complete the viewport meta tag
<meta name="viewport" content="____">Show answer
<meta name="viewport" content="width=device-width"> -
What does initial-scale=1 do?
- Shrinks the page to 50%
- Disables horizontal scrolling
- Starts zoom at 100%
- Doubles the device pixel density
Show answer
Starts zoom at 100% — Correct. initial-scale=1 starts zoom at 100%; no default zoom is applied.
-
Match the terms
- viewport
- The visible area
- device-width
- Real device width
- initial-scale
- Starting zoom level
- width=device-width
- Match page to device