What the Heck Is a Viewport?

A lot of web developers (and designers too) don’t really get what the viewport is. Like, why does my 1920 × 1080 monitor suddenly turn into something like 1746 × 852 on a web page? What the heck, right? Let me break it down in a few short paragraphs.

First 1️⃣. One physical screen pixel hasn’t been equal to one CSS pixel for a while now. This is called Device Pixel Ratio (DPR). Why do we need it? So that layouts render correctly on high-density displays.

Look: iPhone 14 has 1170 × 2532 pixels, but the browser sees it and gives us an equivalent of 390 × 844 — that’s 3 times smaller. DPR = 3x. So in CSS we’re seeing a mobile screen, and the familiar mobile web loads up, even though the actual width was 1170. Get it?

Second 2️⃣. After all that pixel magic, some of the screen space gets eaten up — nom nom — by system stuff, browser UI, etc. From all sides.
And what’s left — that’s the viewport! That’s why it doesn’t match what your device specs say =) That’s the deal.

And finally, I’m sure you’ve seen the magical line: <meta name="viewport" content="width=device-width">. Super important stuff. That code gives the command: the viewport width should match the device’s CSS width. Whoosh — and they’re connected 🪄.

I tried to explain everything as briefly and to the point as possible.
Just a few paragraphs, like I promised.
Anyway, if you’re curious for more, check out the understanding-viewport repo on GitHub — I’ve added more info and some homemade illustrations there.