Screen resolution has become a serious consideration for developers with the introduction of high-density and retina screens on various devices. Not only for they work with a plethora of screen dimensions (desktop screens, smartphones, tablets, and more), they don’t have much guidance on how to setup their app’s UI in relation to screen resolution. This happens because device screen resolution rarely matches CSS resolutions these days. Find out what this means, and how it can affect your project.
The difference between CSS resolution and device resolution
With the rising popularity of high density screens (which started in around 10 years ago), such as 4k or above desktop screens, the gap between CSS and device resolution continues to grow. How do they differ?
Device screen resolution is the actual number of pixels on the screen, while CSS resolution helps measure CSS Rules. The ration between them is defined by Density Display - the ratio of pixels per inch (ppi) or per centimeter (ppcm or pixels/cm).
What does this mean? It’s important to know that a pixel does not have an inherent size. It obtains one when it’s displayer or printed.
Let’s compare some data.
| Device | iPhone 11 | Samsung Galaxy s20 |
|---|---|---|
| Screen size | 6.1” | 6.2” |
| Device resolution | 828px width, 1792px height | 1440px width, 3200px height |
| Pixel density | ca. 326 ppi | ca. 536 ppi |
| CSS resolution | 414px width, 896px height | 360px width, 800px height |
Where do these differences come from?
It all comes down to the difference between the CSS pixel and the device pixel. Look at the Samsung Galaxy s20 screen resolution - it matches or even surpasses some laptop screen resolutions. To fit all these pixels on such a small, and display responsive website scaled for smartphone displays, the CSS pixels comes in very handy.
In other words, CSS resolution is the main measure that affects modern responsive UI development.
But device resolution is still important. It determines how images and videos are displayed. Due to the screen’s high pixel count, these media can be provided at higher density, which creates a sharper view. The math is simple.
Here is a simple calculation example:
We can quickly calculate how to choose the size of the image to increase its sharpness for a specific device.
We will operate on example values:
Device’s physical width - 1284px
Device's CSS width - 428px
Image's CSS width - 321px
First, we need to divide device's physical width (1284px) by device's CSS with (428px)
This equation will look like this:
1284px / 428px = 3
The result obtained (3) is multiplied by Image's CSS width 321 px:
3 * 321px = 963px
The obtained result tells us how much width the image can have to improve the sharpness on this particular device. Increasing the resolution above that will not improve the display quality on this device. This will only increase the size of the files.
How to determine a device’s CSS resolution
Since CSS resolution is used for designing responsive web apps, it’s crucial to know what we’re working with. But phone specifications rarely include this metric. Luckily, websites such as YesViz and My Device aggregate and regularly update this information. And if you’re looking at a desktop screen, all you need to do is to inspect the main root HTML element (while the browser is in full window view).
Wrap-up
We hope this article helps you understand the Difference Between CSS Resolution and Device Resolution. It’s not rocket science, and it’s not a secret. In fact, we believe that it’s important for our clients to know that the world of web development is more complex than it seems.
If you’re looking for a team of experienced web development experts, you’ve found it.
At iRonin.IT, we believe in setting our clients up for success through sharing our know-how. Let’s talk about your business needs.
