window.devicePixelRatio browser support

Question

I have been looking around the web to find what browser support there is for window.devicePixelRatio, without much luck.

Does anyone know what browers/devices support this?

Solution

According to this blog post : ( from 2012 )

• window.devicePixelRatio is mostly trustworthy on most browsers.
• On iOS devices, multiply devicePixelRatio by screen.width to get the physical pixel count.
• On Android and Windows Phone devices, divide screen.width by devicePixelRatio to get the dips count.

2017 UPDATE:

This property returns the ratio of the resolution in physical pixels to the resolution in CSS pixels for the current display device. This value could also be interpreted as the ratio of pixel sizes: the size of one CSS pixel to the size of one physical pixel.

Desktop browsers support:

Chrome    Edge    Firefox    Internet Explorer    Opera    Safari
49        (Yes)   49         11                   41       9.1

Mobile Browsers:

Android     Edge    Firefox     IE Mobile   Opera   Safari Mobile
4.4         (Yes)   ?           ?           all     9.3

Draft Spec

Comments

[Huangism]

if you need to support the newer iOS or androids, then this should work. Logically I would say any device with a pixel ratio that is greater than 1 should support this, but who knows... what do you need to do? Perhaps there are other ways to solving your problem

[Jaydeep Mor]

I think we can use Mozilla MDN for check browser compatibility. It has contain both web & mobile

[Randy L]

the linked article is from 2012. so it's a bit out of date.

[Jules]

Note: "On iOS devices, multiply devicePixelRatio by screen.width to get the physical pixel count" is no longer true - it gives an incorrect result on iPhone 6+, 6s+ & 7+ due to downsampling.