What does <meta name="viewport"> do, and why does it matter?
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
<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:
<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.
Short Answer
Interview readyA concise answer to help you respond confidently on this topic during an interview.