The meta viewport tag is an instruction for controlling scale on mobile devices from the header of our HTML.
Today, we open websites from computers, mobiles, tablets, or even televisions. We are (more or less) accustomed to a website looking good on any device.
The technique that allows the same web page to automatically adapt, rearrange, and look perfect on any screen size is what we call responsive design (or adaptive design).
To achieve this, CSS is our best ally, but there is a mandatory first step: the meta viewport tag.
The Problem of the Fake Desktop Monitor
When the first modern smartphones came out (around the time of the first iPhone), practically no website in the world was prepared for such small screens.
If the mobile had tried to display websites at their actual size of 320 pixels, you would only have seen a microscopic piece of the top-left corner of the page, and the rest would have been hidden to the right, forcing a horrible horizontal scroll.
So they said:
Let’s make the mobile browser “lie”. We’ll tell it to internally pretend it has a huge 980-pixel wide screen (like a monitor of that time).
Let it render the web there, and then shrink and zoom out until it fits entirely on the phone’s tiny physical screen.
And there you go; they thought it was the best idea of the year. That decision saved the day in 2007, but it created a user experience that was a small hell.
You had to constantly do the ‘pinch-to-zoom’ gesture and drag the screen just to read a simple paragraph of text.
How Big is a Mobile Really? (Physical vs. Logical Pixels)
Can it get worse? Always. To make everything more “funny,” if you look at the specifications of a modern mobile, you’ll see it has resolutions of 1080x2400 pixels.
But if you create a web page with a 500px rectangle, it will overflow the screen. (Whaaaat?). Because mobiles use “logical pixels”.
- Physical pixels: The “real” pixels, the small actual LED light dots on your screen’s glass.
- Logical pixels (or CSS pixels): The units of measurement used by the mobile browser.
Basically, because modern screens have such high pixel density, and to prevent a 16px letter from becoming microscopic, mobile operating systems group several physical pixels to act as a single logical pixel.
Therefore, for web design purposes, the actual width of a mobile in logical pixels usually ranges between 360px and 430px.
The Solution: The viewport
Today, modern pages are indeed prepared to rearrange their elements when space is limited. However, for historical compatibility reasons, mobiles still “lie” and shrink the web by default.
To disable this obsolete behavior, we need to go to the <head> section of our HTML and add this line:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
Let’s break down exactly what we are telling the mobile with this instruction:
width=device-width: “Hey browser, stop pretending you are 980 pixels wide. From now on, the width of your canvas will be exactly the actual physical width of the device’s screen.”initial-scale=1.0: “And please, don’t zoom in or out. Set the base zoom level to 100%, my text already has the correct size.”
Where to Place It
The viewport tag must always be inside the <head>, along with the rest of the document’s metadata.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My responsive web</title>
</head>
<body>
<h1>Hello mobile</h1>
</body>
</html>
It’s not visible on the screen, it doesn’t create any visual element, and it is not placed in the <body>. It is a technical instruction for the browser, just like charset.
If you use the VS Code ! shortcut to generate the base HTML, it will usually include this line for you.
The Effect of viewport
Just by adding that tag to your document, the change is drastic. Things are shown at their real size. Text becomes legible on the mobile again, and everything no longer looks tiny.
But now you have a new problem. By telling the mobile not to shrink the page, if you have a <div> container to which you had set a fixed width of 800px,
It will overflow over the right edge of a mobile screen, which is typically around 400px (remember what we said about logical pixels), and you will have the dreaded horizontal scroll back.
Therefore, the viewport tag is just the first step of responsive design. It prepares the ground so that dimensions are real, but now comes the real work of making CSS adapt the design when the screen is narrow.
