Curriculum ▸ HTML Zero → Mastery ▸ Lesson 12: The <meta name="viewport"> Tag Foundations

Lesson 12 — The `<meta name="viewport">` Tag Responsive Design

Learning Goals

Understand the purpose of the <meta name="viewport"> tag.
Learn how it controls scaling and layout on mobile devices.
Apply best practices for responsive design.

Part 1 — What Does It Do?

By default, many mobile browsers render pages as if they’re 980px wide, then scale them down. This often breaks responsive layouts.

The <meta name="viewport"> tag tells the browser how to size and scale the page. The most common setting is:

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

Part 2 — Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Responsive Page</title>
  </head>
  <body>
    <h1>Hello on any screen!</h1>
  </body>
</html>

Part 3 — Best Practices

Always include the viewport tag for mobile-friendly pages.
Use width=device-width to match the screen size.
Set initial-scale=1 for correct zoom.
Avoid disabling user zoom (user-scalable=no) unless absolutely necessary (it can hurt accessibility).

Quick Quiz

Why do we need the viewport meta tag?
What does width=device-width mean?
Why should you avoid disabling user zoom?

Sample Answers

It ensures pages scale correctly on mobile screens.
The page width adapts to the actual device screen width.
It can harm accessibility for users with vision impairments.

Lesson 12 Dictionary

I
initial-scale: Sets the initial zoom level of the page when first loaded.
M
Meta Viewport: A meta tag that controls how a page scales and fits on mobile devices.
V
Viewport: The visible area of a web page on a user’s device.
W
width=device-width: Tells the browser to match the page width to the actual device screen width.