RWD Viewport Meta Tag
The viewport meta tag tells a mobile browser to render your page at the device's real screen width rather than shrinking down a full desktop-width layout to fit.
What Is the Viewport?
The viewport is the visible, rectangular area of a web page that's actually shown on screen at one time. On a desktop monitor the viewport is roughly the size of the browser window. On a phone it's the whole small screen, minus the browser's own chrome like the address bar. The viewport meta tag is a single line placed in the HTML head that gives the mobile browser instructions about how wide that viewport should be treated as, and how much initial zoom to apply.
Here is the problem it solves. Mobile browsers were originally built at a time when most websites were designed only for desktop screens. To avoid rendering those old desktop-only sites as a broken, wrapped mess on a 375px-wide phone screen, mobile browsers made an assumption: without any instructions, they pretend the screen is a wide virtual viewport, historically around 980px, lay the whole desktop page out at that width, and then zoom the entire rendered result out so it fits on the physical screen. The page technically 'fits', but every piece of text on it is now rendered at a tiny, often unreadable size, and the user has to pinch-zoom to read anything.
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Page</title>
</head>
<body>
</body>
</html>- width=device-width tells the browser to set the viewport's width equal to the device's actual screen width in CSS pixels, instead of the fake wide desktop viewport
- initial-scale=1.0 tells the browser to render the page at a 1:1 zoom level the first time it loads, instead of zoomed out
- Both values are needed together, width=device-width alone still leaves the initial zoom level up to the browser
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Viewport Demo</title>
<style>
body { font-family: sans-serif; padding: 24px; }
h1 { font-size: 2rem; }
</style>
</head>
<body>
<h1>Read me on your phone</h1>
<p>With the viewport tag in place, this heading and paragraph render at a natural, readable size on a phone screen instead of being shrunk down to fit an assumed 980px-wide desktop layout.</p>
</body>
</html>Before and After
Without the viewport tag, a phone loads your page as if it were viewing a 980px-wide desktop screen through a small window, then zooms the whole thing out to fit, so a 16px paragraph might visually render at something like 6-7px on screen. With the tag in place, the browser instead treats the viewport as the device's real width (say, 390px on a typical phone), and your CSS pixel values map much closer to their real, readable size. This is why a page can have perfect responsive CSS and media queries, and still look completely broken on a phone if this one tag is missing, the media queries never even get a chance to apply the right styles because the browser thinks it's dealing with a wide desktop screen the whole time.
- Forgetting the tag entirely, the most common mistake, page looks fine on desktop but tiny on phones
- Typing the content value incorrectly, e.g. missing the comma between width=device-width and initial-scale=1.0
- Disabling zoom with user-scalable=no, which harms accessibility
- Placing the tag outside <head>, where browsers may ignore it
