Viewport

You have written media queries, you open the page on a phone, and you see a miniature of the desktop version that you have to zoom in with two fingers. CSS is not to blame, the culprit is one missing line in the head section. A responsive page is one that looks good on all devices and automatically adapts to different screen sizes, and this line is its foundation.

What is the viewport?

The viewport is the area of the browser window in which the page is visible, without the browser's own bars and menus. It is like a window in a temple wall: through it you see only part of the relief, and its width decides how much fits into the frame.

In the past, a special version of the page was created for mobile devices, usually at an address like m.domain.com. Nowadays, everything is done with HTML and CSS in a single document, but the phone has to know that the page is ready for it.

Why does a phone pretend to be a computer?

Mobile browsers were born at a time when pages were designed for computers only. That is why, without extra information, a phone renders the page in a virtual window wider than the screen, for example 980 pixels, and then shrinks the whole view to make it fit. The text becomes tiny, and a max-width: 768px condition never switches on, because the page believes it is 980 pixels wide.

The viewport meta tag

To create a responsive page, we need to tell our HTML file that the page should be responsive. The first step is to add this line inside the head tag:

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

The name="viewport" attribute says what the tag is about, and content passes two settings separated by a comma. width=device-width sets the width of the virtual window to the width of the device screen, and initial-scale=1.0 sets the initial zoom of the page to 100%, with no shrinking. The order of the parts is always the same: <meta, then name, and finally content with both values.

Before you add the tag, the page on a phone looks like a shrunken screenshot of a computer. After you add it, the text has a normal size, and media queries see the real width of the screen.

Viewport and media queries

Only with this tag do the media queries from the previous lesson compare their conditions with the real width of the phone. Take a navigation that should be vertical on a phone and horizontal from 768 pixels up:

1.navigation {
2  display: flex;
3  flex-direction: column;
4}
5
6@media (min-width: 768px) {
7  .navigation {
8    flex-direction: row;
9  }
10}

Without the viewport tag, the phone would pretend to be a screen 980 pixels wide, so the min-width: 768px condition would be met and the menu would line up in a row. With the tag, the phone is, for example, 390 pixels wide, and the menu stays vertical and easy to tap with a finger. This is what the mobile-first approach looks like: you start with the layout for a small screen and build it up from there.

Widths to test

A page is not tested on a single screen. Most often you check a few typical widths in CSS pixels: 320 for a small smartphone, 768 for a tablet in portrait mode, 1024 for a laptop or a tablet in landscape mode, and 1440 for a desktop computer. The browser's developer tools have a device mode in which you switch between them with one click.

My advice: add the viewport tag to every page, and your editor will often do it for you, because the HTML template that VS Code expands from an exclamation mark already contains it. Do not add user-scalable=no or maximum-scale=1, though, because they block zooming, which people with low vision rely on every day. In the next lesson we will look at containers that fluidly fill the available width.

Remember: the viewport tag is a window in the temple wall fitted to the visitor, because without it every phone looks at the relief from far away.