Episode 4 of 12

The Viewport Tag

Learn how to use the viewport meta tag — syntax, properties, and best practices for mobile-friendly pages.

The Viewport Tag

The viewport meta tag is the single most important line of HTML for responsive design. Without it, mobile browsers will render your page at 960–980px width and zoom out, making responsive CSS useless.

The Essential Viewport Tag

<meta name="viewport" 
      content="width=device-width, initial-scale=1.0">

This tag goes inside the <head> of your HTML document, before any CSS links.

Breaking Down the Properties

Property	Value	What It Does
`width`	`device-width`	Sets the layout viewport width to match the device screen width
`initial-scale`	`1.0`	Sets the initial zoom level to 100% (no zooming)

What Happens With and Without the Tag

Scenario	Layout Viewport	Result
No viewport tag	~980px on mobile	Page renders at desktop width, then zoomed out to fit — tiny & unreadable
With viewport tag	375px (device width)	Page renders at actual device width — media queries work correctly

Additional Viewport Properties

The viewport tag supports several other properties:

<meta name="viewport" content="
    width=device-width,
    initial-scale=1.0,
    maximum-scale=5.0,
    minimum-scale=1.0,
    user-scalable=yes
">

Property	Values	Description
`width`	`device-width` or pixels	Sets the viewport width
`initial-scale`	0.1 – 10	Initial zoom level
`maximum-scale`	0.1 – 10	Maximum zoom the user can do
`minimum-scale`	0.1 – 10	Minimum zoom the user can do
`user-scalable`	`yes` or `no`	Whether the user can zoom at all

Important: Never Disable Zooming

You may see websites use:

<!-- ❌ DON'T DO THIS -->
<meta name="viewport" content="width=device-width, 
      initial-scale=1.0, user-scalable=no, maximum-scale=1.0">

Never disable user zooming. This is an accessibility violation:

Users with low vision need to zoom in to read text
It's flagged as an issue by Lighthouse and accessibility audits
Many modern mobile browsers ignore user-scalable=no for this reason
WCAG guidelines require that users be able to zoom to at least 200%

The Recommended Viewport Tag

<!-- ✅ Best Practice -->
<meta name="viewport" 
      content="width=device-width, initial-scale=1.0">

This is all you need in the vast majority of cases. Just two properties.

Setting a Fixed Width (Avoid This)

<!-- ❌ Avoid: forces a specific viewport width -->
<meta name="viewport" content="width=1024">

This forces the layout viewport to 1024px regardless of the device, defeating the purpose of responsive design.

Viewport Units in CSS

CSS also has viewport-relative units that are very useful in responsive design:

Unit	What It Represents	Example
`vw`	1% of viewport width	`width: 50vw;` = half the screen width
`vh`	1% of viewport height	`height: 100vh;` = full screen height
`vmin`	1% of the smaller dimension	Useful for square elements
`vmax`	1% of the larger dimension	Less commonly used

/* Full-screen hero section */
.hero {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Responsive font size */
h1 {
    font-size: 5vw;      /* Scales with viewport width */
    font-size: clamp(24px, 5vw, 64px);  /* With min/max limits */
}

Complete HTML Starter Template

<!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>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <!-- Your responsive content here -->
</body>
</html>

Key Takeaways

The viewport meta tag is required for responsive design to work on mobile
Use width=device-width, initial-scale=1.0 — that's all you need
Never disable zooming — it's an accessibility violation
CSS viewport units (vw, vh) size elements relative to the viewport
The clamp() function creates responsive values with minimum and maximum limits