# Viewport & meta tags — Responsive & Mobile-First Design

Source: https://www.geekswithgeeks.com/en/responsive-design/viewport-meta-tags

> Tell browsers how to render your page on mobile with the viewport meta tag — the first step to responsive design.

## Why viewport matters

By default, mobile browsers assume a desktop-width viewport (~980px) and zoom out. Without the viewport meta tag, your responsive CSS won't work as expected. The tag tells the browser to match the device width instead.

## The essential viewport tag

Always place this in your `<head>`. It tells mobile browsers: use device width, no zooming by default, scale everything at 1:1.

```html
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- Other meta tags -->
  <meta charset="UTF-8">
  <meta name="description" content="Page description">
</head>
```

## Common mistakes

❌ Omitting the viewport tag entirely. ❌ Setting `initial-scale=2.0` or preventing zoom. ❌ Using fixed viewport width like `width=1000px`. ✓ Always use `width=device-width, initial-scale=1.0`.