HTML Basics
HTML Viewport Meta Tag for Responsive Web Design
The viewport meta tag tells mobile browsers how to size and scale your page. Without it, your site will look tiny and zoomed out on phones.
What is the Viewport?
The viewport is the visible area of a web page on a device's screen. Phones have small viewports, so without instructions they pretend to be a wide desktop and shrink the page to fit, which is hard to read.
The Viewport Meta Tag
Adding this single line inside your head fixes the problem and is the foundation of responsive design.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Page</title>
</head>What the Values Mean
| Value | Effect |
|---|---|
| width=device-width | Sets the page width to match the device's screen width |
| initial-scale=1.0 | Sets the initial zoom level to 100% (no zoom) |
⚠️
Never leave out this tag on a modern website. Without it, mobile visitors see a shrunken desktop layout, and responsive CSS media queries will not work as expected.