Screen resolution in Web dev
Hi everyone 👋
If you've ever asked yourself "What is the DPR option in my browser's dev tools ?" or "Why does everything gets bigger on my screen if I lower my resolution settings ?", you're at the right place. For this first (real) blog post, I will talk about screen size, resolution, definition and all that kind of stuff. This post is intended for beginners or devs that rarely put their hands in the CSS part of a website. If you're a design expert, you probably won't learn much here.
When designing a website, you sometimes need to go to the dev tools to view how your website display on different screens. Then you start to try differents smartphone screens and realize that it can display quite differently. To fully understand this, and how to handle it, you need to understand how does a screen display things.
A bit of theory
For the mathematicians out there, there is one formula to keep in mind :
ppi = px / in
where the ppi is the density of pixel on a screen in pixel per inches, px is the number of pixel and in the size in inches.
As a sidenote, be careful because the words are often used confusingly. Many will speak of screen definition for the number of pixel and screen resolution for its density of pixel. Also, you can see the use of DPI instead of PPI, it as the exact same meaning.
A bit of history
Let's take a small break to answer a question that may have come to you. Why is there so much different words and where do they come from ? A lot of terms related to screen resolution and definition actually come from the domain of printing. This is why you will hear of "points" (which was a unit to measure metal typesettings) or "dot per inch" (which is kind of an equivalent of a pixel for a printer)
On your OS
When you choose a smaller resolution than what your screen can handle in your OS, it will emulate having less pixel. Let's call the pixel that your OS (or graphic card) calculated a virtual pixel and the small unit of your screen composed of a red, a green and a blue led a screen pixel.
For example, if in your setting you choose a resolution that is 50% of what your screen have, every virtual pixel will use 2 screen pixel on the x axis and 2 screen pixels on the y axis to be displayed, so all of your screen will be used. In that case, everything will look bigger on your screen.
If instead you choose a resolution that is 75% percent of your max resolution, it would need to display it on 1.5 pixel on the x axis (same for y axis). As it is not possible, your graphic card will start to interpolate and add some blur.
Applied to the web (CSS)
The CSS pixel
The CSS pixel is the origin of every measurements unit in CSS. Every other one is defined using the CSS pixel.
You can find the exact definition on the W3C specification if you want to go deeper, but there is only one thing that matter in practice : a CSS pixel will always look comfortable for a user, whether it uses a laptop or a smartphone. It is defined to look comfortable for a typical use, with a typical screensize, at a typical reading distance.
Thus, it will not always has the same size depending of the type of usage (so don't try to make a ruler on your website), but you don't really care as it will always has the size it needs to have.
Others units and DPPX
Then all other CSS absolute units are defined related to the CSS pixel. You can find there definition here.
Finally, enters the device pixel ratio (dppx). For a smartphone, the CSS pixel is defined using a 160 dpi screen. So if a smartphone has a 320 dpi screen, a CSS pixel will be rendered on 2 device pixel, thus, the dppx will be 2.
Conclusion
Now, you know why a website can be displayed so differently according the screen it is displayed on. It is not that your design is wrong, it is due to the multitude of screen out there and the fact that CSS tried to define units that make it comfortable no matter what type of screen you're on.