39

I would like to know how the -webkit-device-pixel-ratio is calculated. I had already read this. Yet I am unable to understand it clearly. I would also like to know if there is a list of which devices use which pixel ratio. The android website says

The Android Browser and WebView support a CSS media feature that allows you to create styles for specific screen densities—the -webkit-device-pixel-ratio CSS media feature. The value you apply to this feature should be either "0.75", "1", or "1.5", to indicate that the styles are for devices with low density, medium density, or high density screens, respectively.

but I found that we need to use -webkit-device-pixel-ratio=2 to make a web application compatible on 768 x 1280 resolution screen.

0

6 Answers 6

40

According to this article

http://www.html5rocks.com/en/mobile/high-dpi/

The magic number seems to be 150.

Dividing the physical ppi by the ideal ppi of 150, gives the device pixel ratio.

E.g. a device with 445ppi would have a dpr of 3 ->> 445 / 150

The simple calculation seems to hold up okay for many items on this list,

http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density

6
  • Check the article. Maybe you'll have a better shot at understanding what it's saying. What I gathered from it was 150, but the author lost me with the calculations he used.
    – Jet Blue
    Dec 13, 2015 at 23:10
  • Or study this app's (dpi.lv) source code on Github and see if you can eek out how it's calculated. Or alternatively just use the app to find the dpi of the device you are interested in.
    – Jet Blue
    Dec 13, 2015 at 23:28
  • 1
    @mohsensolhnia You're right that 312/150 != 1.5 I changed the numbers used in the example.
    – Jet Blue
    Dec 13, 2015 at 23:44
  • Couldn't thank you enough. After a long time of searching finally you saved me! Mar 26, 2019 at 6:30
  • This doesn't work ever exactly. The newest resolutions doesn't show correctly this number. For example, my device is 403ppi, if I divide for 150 the result is 2.69 aprox, and with window.devicePixelRatio I obtain 2.75, much more exactly pixel ratio.
    – user2778425
    Jun 24, 2020 at 22:37
21

You can find many of your screen parameters by visiting https://www.mydevice.io/ enter image description here

0
7

you can find the pixel ratio using javascript window.devicePixelRatio

1
  • This is the more efficient solution. If you combine this with screen.width and screen.height you can see your entire screen properties.
    – user2778425
    Jun 24, 2020 at 22:34
5

Device Pixel Ratio (DPR) is the relationship between physical hardware-based pixels and Device-Independent Pixels which are an abstraction. The value of the device pixel ratio is not something which can reliably be calculated as it's based on how the device manufacturer intends to map one type of pixel system to the other. To reliably obtain this information, you will need to request it from the device.

2

The problem is that there is no one database with all of (even the most common) devices listed, so looking up the viewport specs for a given device are a case of trying to find the device in any one of several databases.

These are the databases that I've come across and used, that list device viewports along with their pixel ratios:

Feel free to add to the list above, as I'm sure there are much more comprehensive databases out there.

Also remember that resolution / DPR = viewport, so for testing the responsiveness of a site you generally only need one of either DPR or viewport, and the viewport itself is generally better.

0
1

claculate display metrics and get

DisplayMetrics dm = context.getResources().getDisplayMetrics(); int densityDpi = dm.densityDpi

and use dm.xdpi, or dm.ydpi i.e pixcel desity

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.