RWD Viewport
The viewport meta tag tells mobile browsers how to scale the page. Without it, phones pretend the screen is ~980px wide and shrink your layout down to fit — your responsive CSS never gets to run.
The line every page needs
HTML
<meta name="viewport" content="width=device-width, initial-scale=1.0">
What the values mean
| Key | What it does |
|---|---|
width=device-width | Use the device's real CSS width, not the fake 980px default. |
initial-scale=1.0 | Don't zoom in or out by default. |
minimum-scale / maximum-scale | Cap how far the user can zoom. Don't set — it hurts accessibility. |
user-scalable=no | Disable pinch-zoom. Don't set — same reason. |
Companion CSS units
| Unit | Means |
|---|---|
1vw | 1% of the viewport width. |
1vh | 1% of the viewport height. |
1dvh / 1svh / 1lvh | Dynamic / small / large viewport height — accounts for mobile address bars showing & hiding. |
Tip: Use
100dvh (or 100svh) instead of 100vh for hero sections on mobile. It avoids the "scroll bar covers content" trap when the address bar collapses.Example
Example
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Verdana, sans-serif; }
.box { background: #04AA6D; color: #fff; padding: 20px; border-radius: 6px; }
</style>
</head>
<body>
<h1>RWD Viewport</h1>
<div class="box">Edit the CSS on the left, then click Run »</div>
</body>
</html>
Try it Yourself »
Exercise
Tell the browser to use the device's real width.
<meta name="viewport" content="width=
-width, initial-scale=1">
A single word — relates to the phone's screen.
Discussion
Loading…