What is the Difference Between CSS Resolution and Device Resolution?

Piotr Wojciechowski - Product Designer

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.


Let’s get in touch
Author's Bio
Piotr Wojciechowski

Product Designer

Software products expert focused on maximizing business value of products and offering great UX. Crafting meaningful solutions with strategic and analytical approach. In love with design systems, inclusive design and user security.

Similar articles
Comments

Bulletproof your development with remote team augmentation

Read how
This page is best viewed in portrait mode
Our websites and web services use cookies. We use cookies and collected data to enhance your experience, provide additional communication channels, improve marketing materials and enhance our offer. IRONIN SP. Z O.O. SP. K. is committed to protecting all the data that we collect or process in any way, especially data of personal nature. By accepting these terms you agree to our usage of cookies and processing your data, according to our Privacy Policy, and you declare that your browser settings reflect your preferences. Read more You have the right to revoke this agreement at any time, based on the terms of our Privacy Policy. You can change cookies settings in your browser. If you do not agree with us using cookies and processing your data, please change your cookies settings in your web browser and reject these terms. You can find more information about cookies, your data privacy This site uses cookies. By continuing to browse the site, you are agreeing to our use of cookies. data processing, and your rights in our Privacy Policy.