CODEWITHSUNDEEP
androidgoogle-chromeandroid-emulatorweb-deploymentchrome-dev-editor
Mousin Ahanger
Mousin Ahanger

Reputation: 11

What is DPR in chrome developer tools? How is it used and why?

I was trying to emulate a device. I don't understand what does DPR do. For example if I want to add my mobile with resolution 720×1440. I write 360×720 to fit it on my laptop screen with 100% zoom meaning that now it occupies 360×720 pixels of my laptop screen. I think that DPR is used to fit higher resolution devices into other screens at reduced screen resolution that is in my case DPR should be 2. I have done many experiments and I think DPR should be set for the laptop to assume that this area with a 360×720 on my screen is actually 720×1440. However if DPR is what I think, then the window.screen.width; must return 720. But it still returns 360. This theory fits as long as I see the pre-added device list of the chrome dev tools. What is the real logic behind DPR? How can I really add my 720×1440 device? what length width must be set for my device?

Upvotes: 0

Views: 6032

Answers (1)

Levi Wilkerson
Levi Wilkerson

Reputation: 210

There isn’t a one-to-one mapping between CSS pixels and device pixels. Some devices use four smaller pixels to one CSS pixel, arranged in a 2x2 grid. Some use one, and some use nine (3x3 grid). There can even be a fractional ratio between the two, like 1.5 or 2.25.

The number of device pixels that make up a CSS pixel in one direction is its Device Pixel Ratio (DPR). You can interpret this as the width (or height) of the grid of device pixels that fit inside one CSS pixel.

Here’s how I understand it.

Firstly, higher resolution devices have more pixels available to display the image.

Let’s say there were two devices that were 4 inches wide. Device 1 can fit 2000 pixels in that space, and device 2 can only fit 1000.

Device 1 is 2000 pixels wide, so it could display the image with width 2000w perfectly. But device 2 is 1000 pixels wide, so it can’t display this image perfectly. It would have to “average out” the colour values of some pixels. There’s no point serving this device with the 2000w image: it’s just unnecessary data downloading. You’d give it a smaller image.

Device 2 would even struggle with the image with width 1200w. It would still have to average out some pixels. But it’s a lot better than the 2000w image, and a lot smaller too.

Source: https://tomroth.com.au/dpr/

Upvotes: 3

Related Questions