The tag to use
Put this line in the <head> of every page:
<meta name="viewport" content="width=device-width, initial-scale=1">
width=device-width makes the layout as wide as the screen, and initial-scale=1 opens the page at 100% zoom. That is all most sites need. A full page with the tag in place:
The script reads the tag and the layout width. Desktop browsers ignore the viewport tag, so in this preview the width is simply the width of the preview box. On a phone, the same file reports the phone's width (typically 360 to 430 CSS pixels) because of the tag.
What phones do without it
A mobile browser that finds no viewport tag assumes the page was built for a desktop. It lays the page out about 980 pixels wide, then shrinks the whole thing to fit the screen. The two mock phones below load the same page, one laid out at 980px and one at a phone width, both scaled to the same size:
On the first phone the 16px text ends up tiny and the reader has to pinch and zoom. On the second it stays readable, and the columns stack because the @media (max-width: 600px) rule matches. That is the second job of the tag: media queries see the layout width, so without the tag a phone reports 980px and your mobile styles never apply. Change 375 to 980 in show('with', 375) and both phones look the same.
The tag is half the job
The viewport tag gives you a narrow layout; your CSS has to fit in it. One element with a fixed width wider than the screen makes the whole page scroll sideways:
The first box scrolls sideways; the second shrinks to fit. Give images and other wide elements max-width: 100%, and prefer flexible widths (percentages, fr, flexbox) over fixed pixel widths.
Viewport values
| Value | Example | What it does |
|---|---|---|
width | width=device-width | Layout width. device-width is the screen width in CSS pixels; a number is also allowed but rarely a good idea. |
initial-scale | initial-scale=1 | Zoom level when the page opens. |
minimum-scale / maximum-scale | maximum-scale=5 | Limits on zooming. A low maximum blocks zoom, so leave maximum-scale out. |
user-scalable | user-scalable=yes | Whether pinch zoom is allowed. Leave it out. |
viewport-fit | viewport-fit=cover | Lets the page extend under a notch or rounded corners, paired with env(safe-area-inset-*) padding. |
interactive-widget | interactive-widget=resizes-content | How the on-screen keyboard affects the layout. Supported by Chrome on Android. |
Values are separated by commas. A page that fills the whole screen on phones with a notch looks like this:
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<style>
body {
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
}
</style>
Do not block zooming
You will find this tag in older templates:
<!-- Avoid: stops people from zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
It prevents pinch zoom, which people with low vision depend on, and accessibility checkers such as Lighthouse flag it. Safari on iOS ignores user-scalable=no, so the tag does not even work consistently. If a form field zooms in when tapped on iPhone, the cause is a font size under 16px on the input; set the input's font-size to at least 16px instead of disabling zoom.
Common mistakes
- Forgetting the tag. A responsive stylesheet does nothing on phones without it, because media queries see a 980px layout. Put it next to the title tag in your page template.
- Semicolons between values. Use commas:
width=device-width, initial-scale=1. - Hardcoding a width such as
width=375. Screens vary; usedevice-width. - Disabling zoom with
user-scalable=noormaximum-scale=1. - Blaming the tag for sideways scrolling. Find the element that is wider than the screen and give it a flexible width.
Frequently Asked Questions
What does the meta viewport tag do?
It tells mobile browsers how wide the layout should be. Without it, most phones lay the page out at about 980 CSS pixels and shrink it to fit the screen. With width=device-width the layout matches the screen width, so text is readable and media queries work.
What is the standard meta viewport tag?
<meta name="viewport" content="width=device-width, initial-scale=1">, placed in <head>. It is the right choice for almost every responsive page.
Why is my meta viewport not working?
Check that the tag is in <head>, that name is viewport and the values are separated by commas. If the page still scrolls sideways, some element is wider than the screen, such as a fixed width, a large image or a long word; the tag cannot fix CSS that is wider than the device.
Should I use user-scalable=no or maximum-scale=1?
No. Both stop people from zooming, which many users with low vision rely on, and they fail accessibility audits. Safari on iOS ignores user-scalable=no anyway.
Does the meta viewport tag affect desktop browsers?
No. Desktop browsers ignore it; the layout width there is simply the window width. The tag matters on phones and tablets.
