CODEWITHSUNDEEP
htmlcss
Дмитрий Скрипко
Дмитрий Скрипко

Reputation: 45

Why does 1px in CSS not match with 1 px from screen resolution?

If you inspect body/html of this site (or any else) from dev tools you can clearly see width (x) of the page are 15-20% smaller compared to your screen resolution.

enter image description here

Where the difference come from ?

I understand why there could be a small differences +-50px coz of borders/scrollbars etc. of browser itself, but I'm sure they aren't 400 missing px wide.

I also checked if my browser settings is set to 100% scale

enter image description here

Upvotes: 2

Views: 1469

Answers (1)

Fenton
Fenton

Reputation: 250952

Calculated Sizes

It's pretty common these days to have calculated sizes, clamps, or min/max definitions. So, first thing to check is whether these are affecting the numbers you expect.

Pixel Density

Modern devices have different screen densities. Basically, this means more physical blinky lights are used to represent one "theoretical pixel", which allows for super high resolution rendering.

Mathmatecially, there will be a ratio of real pixels (blinky lights) to theoretical pixels, for example the iPhone 11 Pro has a 3x pixel density, and the Samsung Galaxy S10 has a 4x pixel density. This is "how many device pixels there are for each CSS pixel.

To look at this another way, the 1440 physical pixels on the Samsung represents 360 CSS pixels.

A full rundown is available in this article.

Upvotes: 1

Related Questions