What is the Viewport Meta Tag? | HTML Interview Questions

What You'll Learn

What viewport meta tag does
Why it's essential for responsive design
Best practices

The Problem

Without the viewport meta tag, mobile browsers render pages at a typical desktop width (around 980px) then scale down, making text tiny and requiring zoom.

The Solution

index.htmlHTML

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

This tells the browser to:

width=device-width - Match the screen width
initial-scale=1.0 - Don't zoom in or out

Code Examples

index.htmlHTML

<!-- Standard responsive viewport (recommended) -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- With additional options -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">

<!-- Full head example -->
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mobile-Friendly Page</title>
</head>

Don't Do This

index.htmlHTML

<!-- Hurts accessibility - users can't zoom -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

Disabling user scaling hurts accessibility for users who need to zoom.