The Viewport Meta Tag and What It Does

This is one of the shortest lessons in the course, but one of the most important. Without this three-word HTML tag, every media query you write is effectively invisible on real mobile devices — the CSS is there, but the browser never applies it.

What the viewport is

The viewport is the visible area of the browser window — what the user actually sees on screen. On a desktop browser, this is straightforward: the viewport is roughly the browser window size.

On mobile, it is more complicated. Mobile browsers do not simply display the page at the device’s physical width. They have historically rendered pages at a virtual desktop width — typically 980px — and then scaled the result down to fit the physical screen.

This was a workaround designed in the early 2000s so that fixed-width desktop sites would not be completely unusable on mobile. But it also makes every responsive layout technique you apply completely pointless: if a 375px iPhone is pretending to be 980px wide, a @media (max-width: 600px) rule will never fire.

The viewport meta tag

The fix is a single HTML element in the <head> of every page:

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

This tells the browser two things:

width=device-width — set the viewport width to the actual physical width of the device screen. A 375px iPhone renders at 375px, not 980px. A 768px iPad renders at 768px. Your media queries now fire at the correct widths.

initial-scale=1 — do not apply any initial zoom. Display the page at 1:1 scale. Without this, some browsers apply a zoom level that still makes the layout feel different from your CSS’s intent.

Why media queries don’t work without it

Consider this CSS:

@media (max-width: 600px) {
  .site-nav {
    flex-direction: column;
  }
}

On an iPhone SE (375px wide), you expect this to fire and stack the nav. But without the viewport meta tag, the browser sees a viewport of 980px — well above 600px — and does not apply the rule. The layout looks like a zoomed-out desktop site with tiny, unreadable text.

With the viewport meta tag, the browser correctly reports a 375px viewport and the media query fires exactly as intended.

The full tag in context

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Summit Trail Outfitters</title>
  <link rel="stylesheet" href="style.css">
</head>

The viewport meta tag goes in <head>, before your stylesheet link. It does not matter exactly where in <head> — the browser reads it before layout begins.

Additional viewport values

The content attribute can include additional comma-separated values:

<!-- Prevent users from zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

Do not use user-scalable=no. It prevents users from zooming in — a significant accessibility barrier for users with low vision. Many screen readers and assistive technologies also rely on zoom. This value violates WCAG accessibility guidelines. The correct tag is always:

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

Where it lives in an Astro project

In a standard HTML project, you add the tag manually to every .html file’s <head>. In a framework like Astro with Starlight, the base layout template handles this automatically — Starlight injects the viewport meta tag into every generated page. You can confirm by viewing the page source in the browser and searching for viewport.

For the STO project files (index.html, tours.html, etc.), you add it manually.

Exercise

Verify and add the viewport meta tag to the STO project:

Open each HTML file in your STO project (index.html, tours.html, about.html, contact.html).
In the <head> of each file, confirm this tag is present:

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

If it is missing from any file, add it now.
Open index.html in Chrome with DevTools open. Activate the Device Toolbar (Ctrl+Shift+M) and set the width to 375px.
To see the difference the tag makes: temporarily comment out the viewport meta tag and reload. Notice how the layout now renders at desktop width and scales down. Uncomment it and reload — the layout now renders at 375px.

Recap

Without the viewport meta tag, mobile browsers render pages at a virtual 980px width and scale them down — making all responsive CSS ineffective.
width=device-width sets the viewport to the device’s actual physical width.
initial-scale=1 prevents automatic zoom scaling.
Never use user-scalable=no — it prevents zooming and harms accessibility.
Add <meta name="viewport" content="width=device-width, initial-scale=1"> to the <head> of every HTML page.

Lesson 04 introduces media queries — the CSS syntax that lets you apply different rules at different viewport widths.