CSS Responsive
RWD Viewport
The viewport is the visible area of a web page on a device screen. Without instructions, mobile browsers pretend to be a wide desktop and shrink your page to fit, making text tiny. The viewport meta tag tells the browser to use the device's real width — it is the single most important line for responsive design.
What is the Viewport?
The viewport is the window through which a user sees your page. On a desktop it is the browser window; on a phone it is the much smaller screen. Historically, mobile browsers assumed pages were designed for ~980px desktops, so they rendered at that width and zoomed out — leaving users to pinch-zoom to read anything.
The Viewport Meta Tag
To fix this, add the viewport meta tag inside the head of every page. It instructs the browser to match the layout width to the device width and start at a normal zoom level.
<meta name="viewport" content="width=device-width, initial-scale=1.0">Breaking Down the Attributes
| Property | Meaning |
|---|---|
| width=device-width | Set the layout width to the device's actual screen width |
| initial-scale=1.0 | Set the starting zoom level to 100% (no zoom) |
| maximum-scale | Limit how far users can zoom in (use with caution) |
| user-scalable | Whether users may zoom at all (avoid disabling it) |
Where It Goes
The tag lives in the head of your HTML document, alongside the charset declaration. Here is a minimal responsive-ready document skeleton.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Responsive Page</title>
</head>
<body>
<h1>Hello, responsive world!</h1>
</body>
</html>Do not disable zooming with user-scalable=no or a tiny maximum-scale. Users with low vision rely on pinch-to-zoom; blocking it is an accessibility failure.
Without this tag, media queries still exist but behave against the fake 980px width, so your responsive breakpoints will not trigger as expected on phones. It is the foundation everything else depends on.
Common Mistakes
- Forgetting the tag entirely — the page renders zoomed-out on mobile.
- Setting a fixed pixel width like width=1024 instead of device-width.
- Disabling user scaling and harming accessibility.
- Placing the tag in the body instead of the head.
Key Points
- The viewport is the visible area of the page on the device.
- Add <meta name="viewport" content="width=device-width, initial-scale=1.0"> to every page.
- width=device-width matches the layout to the real screen width.
- initial-scale=1.0 sets a normal starting zoom.
- Never disable user zooming — it breaks accessibility.