Difference Between Viewport, Screen Resolution, DPR, and PPI for Responsive Web Development

Viewport x DPR = Screen Resolution. The screen resolution is the number of physical or hardware pixels present on a screen where viewport size is the number of CSS or software pixels on a screen. One CSS pixel can equal one or a different number of physical pixels depending on your specific device. And the ratio between the physical pixels and the CSS pixels is DPR or CSS Pixel Ratio. PPI, on the other hand, is the number of physical pixels present in an inch of a screen.

There are many device types like a laptop, tablet, mobile, etc. and each of these device types come with different screen sizes and different screen resolutions. To an end-user, these are some simple things. For instance, if they want a bigger screen, then they will go for a 15 inch laptop instead of a 13 inch laptop. Also, if they want a sharper display, then they will go for a 2160p display instead of a 1080p display or a 458 PPI display instead of a 326 PPI display.

However, if you are a web developer, then you will see that a mobile phone’s display with 1080 pixels width requires you to consider it as more like a display with 360 pixels width. But if you want an image to look sharp on that 360 pixels, you will actually need to use an image with 1080 pixels width.

So, you will need to consider different factors related to screen resolutions when developing a responsive website. That’s where you will come across different terms like screen resolutions, viewport, DPR, PPI, and so on. So, lack of understanding of these terms will make working with different screens difficult for the beginner web developers. So, in this article, I will help clear up your confusions related to screen resolutions and similar terms that are widely used in responsive web development.

What is Screen Resolution?

Screen resolution is the number of pixels a screen can display. This is measured by multiplying the number of horizontal pixels with the number of vertical pixels that are present on a screen. For instance, an FHD screen has 1920 pixels in its width and 1080 pixels in its height. So, the screen resolution of a FHD screen is 1920p x 1080p = 2,073,600 pixels.

When companies market their devices, they state the screen resolution of their devices. Higher screen resolution means a sharper or clearer screen for the same screen size. For instance, if a laptop is 15 inches, then its screen will look sharper with a 1440p display compared to a 1080p display.

Devices with smaller screen sizes can have equal or more screen resolution than the devices with larger screen sizes. For instance, a Dell XPS 13 laptop has a screen size of 13 inches with a screen resolution of 1920p x 1080p where the iPhone 11 Pro has a screen size of 5.8 inches but with a screen resolution of 1125p x 2436p. Therefore, the screen resolution of the iPhone 11 Pro is actually higher than that of Dell XPS 13 laptop.

Screen resolution is also commonly referred to as native resolution, display resolution, and physical resolution. Where the pixels in a screen resolution are commonly referred to as hardware pixels, device pixels, and physical pixels. Here, a physical pixel is the smallest individual light on a screen that is capable of displaying a full color.

What is Viewport?

Viewport, in web development, is the total area in a web browser where webpages can be displayed. Therefore, the portion of a webpage that you see on a screen is actually the portion that is inside the web browser’s viewport. So, when you want to see different parts of a webpage on your Chrome, Safari, or any other web browser, you need to bring those parts in the web browser’s viewport by scrolling the webpage.

Viewport size is made up of CSS pixels therefore it may or may not equal the number of physical pixels on a device. For instance, the viewport size of the MacBook Pro 16 inch laptop is 1536p x 960p even though its screen resolution is 3072p x 1920p. Also, the viewport size of iPhone 11 Pro is 375p x 812p even though its screen resolution is 1125p x 2436p.

In CSS, the unit px is used to mean CSS pixel. Therefore, if you define an image width to be 300px, then that 300 pixels will represent the CSS pixels and cover 300 pixels width in the viewport and not the screen resolution.

Even though devices with smaller screen sizes can have equal or more screen resolution than the devices with larger screen sizes, the viewport size of devices with smaller screen sizes are generally smaller than that of devices with larger screen sizes of a different type. Therefore, the screen resolution of a mobile can be equal or more than a laptop but the viewport size of a mobile will generally be smaller than that of a laptop.

This difference in viewport size and screen resolution is necessary to compensate for the differences between the number of physical pixels and screen sizes for various devices. For instance, a laptop screen can be 12 inches width consisting of 1200 pixels. At the same time, a mobile screen can be 3 inches width consisting of the same 1200 pixels. So, both the devices have different screen sizes but the same number of physical pixels.

Now, when you browse a webpage on your laptop, you may see that the text size on that webpage is large enough for you to read comfortably. But, when you browse that same webpage on your mobile, you may see that the texts look so tiny that they can’t be read. This may happen because your mobile screen is only 3 inches wide but is trying to show the same amount of text in a line that is being shown in the much bigger 13 inches wide laptop screen because of both having the same screen resolution.

That’s where a different viewport size than the screen resolution comes into rescue. The viewport size will allow your laptop screen width to be treated as 1200 pixels but your mobile screen width to be treated as only about 300 pixels. This way you will get to see comfortably readable texts on both your laptop and on your mobile device.

Here is a good explanation of the logical resolution.

Viewport is also commonly referred to as logical resolution and CSS resolution. And the pixels in a viewport are commonly referred to as logical pixels, software pixels, Device Independent Pixels, and CSS pixels. Here, 1 CSS pixel equals to 1/96 of an inch.

What is DPR?

DPR or Device Pixel Ratio, also known as CSS pixel ratio, is the number of physical pixels that make up a CSS pixel in one direction of a screen like in the width direction or in the height direction. In other words, it is the ratio between the physical pixels and the CSS pixels. It can also be said that DPR is the ratio between the screen resolution and the viewport size. For example, the screen resolution of an iPhone 11 Pro is 1125p x 2436p and the viewport size is 375p x 812p. So, every CSS pixel is taking up 3 physical pixels in each direction (width: 375p x 3 = 1125p; height: 812p x 3 = 2436p). Therefore, the DPR of the iPhone 11 Pro is 3.

However, a DPR value of 2 doesn’t mean that 1 CSS pixel equals 2 physical pixels. Instead, it means that 1 CSS pixel equals 2 physical pixels in both directions of width and height. And because pixels in a screen are square shaped, 2 physical pixels in both directions will result in 2 x 2 = 4 pixels. So, for a DPR value or 2, 1 CSS pixel will equal 2 x 2 = 4 physical pixels. In the same way, for a DPR value of 3, 1 CSS pixel will be equal 3 x 3 = 9 physical pixels.

Devices with higher screen resolution for the same screen size, have higher DPR value.

All the screens have a DPR that can be either integer or decimal. When one physical pixel equals to one CSS pixel in a screen, the screen will have a DPR value of 1. For instance, if a laptop is 1920p x 1080p and its viewport is also 1920p x 1080p, then that laptop has a DPR of 1. But if that laptop has a viewport size of 1280p x 720p, then the laptop will have a DPR value of 1.5 (width: 1280p x 1.5 = 1920p; height: 720p x 1.5 = 1080p).

DPR value can also be less than 1 though it isn’t very common. But you can achieve this by zooming out your web browser. Zooming in or zooming out in a web browser will result in a change in the DPR value as well as in the viewport size.

You can test your device’s screen resolution, viewport, DPR, and some other information from this mydevice.io website.

When the viewport size is smaller than the screen resolution meaning a DPR value of more than 1, images delivered based on the viewport size won’t look as sharp as they could look. For instance, if a mobile screen has a DPR value of 2, then an image container of 300px width will cover 300px width in the viewport. However, because of the DPR value, the screen resolution that the image will take will be 300p x 2 = 600p. So, delivering a 300p wide image on the 600p screen resolution will look blurry. Therefore, the image size should have a width of 600p to look clear in that 300p image container on the mobile. That’s why images should be adjusted to the DPR value when delivering then to any screens. You can link multiple versions of the same image on your webpage by defining which image should be served for which DPR value.

However, you don’t need to do anything extra for serving fonts or any vector files like SVG images in order for them to look sharp on screens with high DPR values. That’s because they can be scaled to fit all screen sizes without losing quality and so they are automatically adjusted by the web browsers according to the DPR values. But this isn't possible for image files like JPG, PNG, GIF, and so on because they can't be scaled to any size without losing quality or sharpness.

So, delivering high resolution images to the retina displays actually means delivering images based on the DPR values because Apple device’s retina displays have a DPR value of more than 1.

What is PPI?

PPI or Pixels Per Inch is the number of physical pixels that make up an inch in one direction of a screen like in the width direction or in the height direction. It is not the same as screen resolution. That’s because in case of screen resolution, the number of physical pixels present in any direction of a screen isn’t confined to any specific length like an inch.

Because screen resolution and PPI are related to the physical pixels of a screen, you can calculate the PPI of a screen by its screen resolution and screen size and vice versa. For instance, a laptop with 13 inch diagonal display and an aspect ratio of 16:9, the width and height of the device will be about 11.3 inches and 6.4 inches respectively. So, if the screen resolution of the laptop is 1920p x 1080p, then PPI of the screen will be about 170 (11. 3 x 170 ≈ 1920; 6.4 x 170 ≈ 1080).

Note: there is another term called DPI or Dots Per Inch which sometimes causes confusion with PPI. So, to clarify, PPI is used in case of screens and DPI is used in case of printed materials.