HTML Basics
HTML Viewport Meta Tag for Responsive Web Design
The viewport meta tag is a single line that makes your site look right on phones instead of appearing as a shrunken desktop page. No responsive site works properly without it.
What is the Viewport Meta Tag?
The viewport is the visible area of a web page on a device's screen. Without instructions, mobile browsers assume a page was designed for desktop and shrink it to fit, leaving tiny, unreadable text.
The viewport meta tag tells the browser to match the page width to the device's actual width and to use a normal zoom level. It goes inside the <head> of every responsive page.
Syntax
<meta name="viewport" content="width=device-width, initial-scale=1.0">Example: A Responsive Page Header
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Page</title>
</head>
<body>
<h1>This page fits the screen width</h1>
<p>Resize your browser or view on a phone to see it adapt.</p>
</body>
</html>More Examples
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="font-family:sans-serif;">
<div style="max-width:600px; margin:auto; padding:16px;">
<h2>Centred, fluid content</h2>
<img src="https://picsum.photos/600/300" alt="Placeholder"
style="width:100%; height:auto;">
<p>The image and text scale down neatly on small screens.</p>
</div>
</body>
</html>Common content Properties
| Property | Meaning |
|---|---|
| width=device-width | Match the layout width to the device's screen width. |
| initial-scale=1.0 | Set the starting zoom level to 100%. |
| maximum-scale | Limit how far users can zoom in. |
| user-scalable | Allow or block pinch-to-zoom (avoid disabling). |
Do not set user-scalable=no or a small maximum-scale. Blocking zoom harms users with low vision and can make your site fail accessibility checks.
Add the viewport tag to every page as part of your standard <head> boilerplate. It is a one-line requirement for mobile-friendly, responsive design.
Key Takeaways
- The viewport is the visible screen area of a page.
- The viewport meta tag makes pages fit mobile screens correctly.
- Use width=device-width and initial-scale=1.0 as the standard.
- Never disable zoom — it hurts accessibility.