Viewport is the size of the visible area in a window or on a screen. In everyday use the term refers to the screens of mobile devices such as smartphones and tablets.

The term has a narrower meaning as well: a meta element in HTML 5 that plays an important part in optimizing for mobile. That piece of markup scales the displayed content automatically, so the size of the screen gets used properly. In that role the viewport meta element makes sure all the content spreads across the screen evenly and appears correctly and in full on screens of different sizes. The viewport code adapts web pages to the height and width of the screen, so mobile browsers can display all the content correctly.

The size of your own viewport

Viewport Checker (screen measurements)

The page above tells you the exact dimensions of your own screen.

The HTML code

There are two ways to put the viewport code into your HTML files: straight into the document, or into a CSS file that the document references. The syntax of the two options differs only slightly.

If you want to add the viewport straight into your HTML file as a meta tag, you can use the following code:

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

Here the width is defined so that it adapts to the screen width of the device in question (width=device-width). initial-scale is the starting zoom factor, and it states that your page will be displayed at a ratio of 1:1 on the screen of that mobile device.

A viewport can also be used to define the height and to configure a minimum and/or maximum zoom factor. On top of that, this meta tag lets you stop users from zooming (user-scalable=no), which can lower your accessibility scores.

If you set the viewport in a CSS file instead of the meta tag, it is healthier practice to put it right at the top of the file so that the page displays correctly. Here is an example of how that code might look:

@viewport {
width: device-width;
}

The viewport code I recommend

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

The code we recommend opens at 1:1 by default. But when a user needs to, they can zoom the text, the content, the whole site up to a scale of 5. This gets your visitors the most out of your site. It also makes reading easier for people with impaired sight.

The PageSpeed warning reads: [user-scalable=”no”] is used in the element, or the [maximum-scale] attribute is less than 5.

To clear that warning, use the code shared above.