The Viewport Meta Tag: Making HTML Pages Work on Phones

On a phone, a browser without any hints assumes your page was designed for a wide desktop screen. It renders the page at about 980 pixels wide and shrinks everything to fit, so text is tiny and visitors must zoom.

One line of HTML fixes this.

1

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

Put it in the <head>.

What it means

• width=device-width makes the page as wide as the device screen.
• initial-scale=1 starts at normal zoom.

With this in place, your CSS can respond to the real width of the screen.

Do not block zooming

You may see user-scalable=no or maximum-scale=1 in old code. Do not use them. People with low vision need to be able to zoom.

It does not make a page responsive by itself

The viewport tag only tells the browser the true screen size. You still need flexible CSS to make the layout adapt:

1
2
3
4

img { max-width: 100%; height: auto; }

.columns { display: flex; flex-wrap: wrap; gap: 16px; }
.columns > * { flex: 1 1 260px; }