Before smartphones, such as the iPhone, became mainstream, every website was built to be around 1000 px in width or 980 px wide and it was zoomed out to fit into the mobile phone screen, which eventually made the website unreadable. Hence, the <meta name="viewport"> was created.

In a nutshell, the viewport meta tag is used to define the web page scale and its visible area (viewport) in the browser. The following code is an example of a viewport meta tag in action:

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

The preceding viewport meta tag specification defines the web page viewport width to follow the device. It also defines the web page scale upon opening the web page for the first time at 1:1, in a way that the sizes and the dimensions of the web page content should be persistent; they should not be scaled up or scaled down.

In favor of comprehending how the viewport meta tag would affect a web page layout, I have created two web pages for comparison; one with the viewport meta tag added in and the other one without it. You can see the difference in the following screenshot:

The first website shown in the preceding image is issued with the viewport meta tag using the exact same specification as in our previous code example. As we have specified width=device-width, the browser acknowledges that the website viewport is at the same size as the device screen, so that it will not squish the web page to fit in the entire screen. The initial-scale=1 will retain the title and the paragraph in their original size.

In the second website's example, as we did not add the viewport meta tag, the browser assumed that the web page should be displayed entirely. So, the browser forced the whole website down to fit within the whole screen area, making the title and the text totally unreadable.

A word on screen size and viewport

You may have found on many web design forums or blogs that viewport and screen size are mentioned interchangeably quite often. But, as a matter of fact, they are two different things.

Screen size refers to the device's actual screen size. A 13-inch laptop, for example, commonly has a screen size of 1280*800 pixels. The viewport, on the other hand, describes the viewable area in the browser where it displays websites. The following diagram illustrates this:

The media types module in CSS enables us to target style rules to specific media. If you have created a print style sheet before, you certainly are familiar with the concept of media types. CSS3 introduced a new media type called media queries, which allow us to apply styles within the specified range of the viewport width, also known as breakpoints.

The following is one simple example; we decrease the p font size from 16px to 14px of the website when the website's viewport size is at 480px or lower.

p { 
font-size: 16px;
}
@media screen and (max-width: 480px) {
p {
    font-size: 14px;
}
} 

The following diagram illustrates the preceding code:

We can also combine multiple ranges of viewport widths by using the and operator. Following our preceding example, we can set the p font size to 14px when the viewport size is between 480px and 320px in the following manner:

@media screen and (min-width: 320px) and (max-width: 480px) {
p {
font-size: 11px;
  }
}