Suggest an edit

Improve this article

Refine the answer for “What does <meta name="viewport"> do, and why does it matter?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

The `<meta name="viewport">` tag controls **how a web page is displayed on mobile devices**, smartphones and tablets.
It makes the site **responsive**, meaning it correctly scales to the size of the user's screen.

Without this tag, the page on a phone will look **like a shrunk-down copy of the desktop version**, with tiny text and horizontal scrolling.

---

### 1. Example of the basic tag

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

Parameter breakdown:

- `width=device-width`: sets the viewport width equal to the device's screen width (instead of 980px, which is the default).
- `initial-scale=1.0`: sets the initial display scale (100%).

Thanks to this, the page automatically **adapts to the screen**, the text is readable, and elements do not "fall apart".

---

### 2. What happens without `viewport`

Without this tag, the mobile browser:

- renders the page **in a "virtual window" about 980 pixels wide**;
- then **shrinks** it to fit the screen;
- the user has to **zoom in and scroll** the content manually.

This makes the site inconvenient and lowers rankings in mobile search results.

---

### 3. Commonly used parameters

| Parameter | Purpose | Example |
|---|---|---|
| `width=device-width` | Page width equals the device's screen | required |
| `initial-scale=1.0` | 100% scale on load | required |
| `maximum-scale=1.0` | Prevents the user from zooming in | use with caution (accessibility!) |
| `user-scalable=no` | Completely blocks zooming | not recommended |
| `minimum-scale=1.0` | Minimum scale | optional |

Example:

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

---

### 4. Why the tag matters for SEO and UX

#### For SEO:

Google and other search engines **evaluate mobile responsiveness** as a key ranking factor.
Without `viewport`, a site is considered **not optimized for mobile devices** and loses rankings.

#### For UX (user experience):

- Content automatically **scales to the screen**;
- Text remains **readable** without zooming;
- Interface elements become **easy to tap**;
- The user does not feel frustrated while scrolling.

---

### Summary:

| Property | Value |
|---|---|
| Tag | `<meta name="viewport">` |
| Location | Inside `<head>` |
| Purpose | Controls the page's responsive display |
| Main parameters | `width=device-width`, `initial-scale=1.0` |
| SEO importance | Critical: affects mobile ranking |
| Without it | The page "shrinks" and looks incorrect |

---

**In simple terms:**
`<meta name="viewport">` tells the browser:

> "Show the page fitted to the user's screen width, not like on a computer."

This is the **main tag of responsive layout**, without which the site will not be convenient and will not pass a mobile SEO check.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts434 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.