Right now I am using this function:
function is_retina_device() {
return window.devicePixelRatio > 1;
}
But its simplicity scares me. Is there a more thorough check?
According to everything that I've read recently, browsers seem to be moving towards the resolution
media query expression. This is instead of device-pixel-ratio
that is being used in the currently accepted answer. The reason why device-pixel-ratio
should only be used as a fallback is because it is not a standard media query.
According to w3.org:
Once upon a time, Webkit decided a media query for the screen resolution was needed. But rather than using the already-standardized resolution media query, they invented -webkit-device-pixel-ratio.
Resolution Media Query Documentation
Since resolution
is standardized and therefore the future let's use that first in the detection for future proofing. Also because I'm not sure if you want to detect only high dppx devices or only retina(Apple only) devices, I've added one of each. Finally just as a note, the Apple detection is just user agent sniffing so can't be depended on. Note: for the isRetina
function I'm using a dppx of 2 instead of 1.3 because all retina apple devices have a 2dppx.
Note it appears that MS Edge has some issues with non integer values
function isHighDensity(){
return ((window.matchMedia && (window.matchMedia('only screen and (min-resolution: 124dpi), only screen and (min-resolution: 1.3dppx), only screen and (min-resolution: 48.8dpcm)').matches || window.matchMedia('only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 2.6/2), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (min-device-pixel-ratio: 1.3)').matches)) || (window.devicePixelRatio && window.devicePixelRatio > 1.3));
}
function isRetina(){
return ((window.matchMedia && (window.matchMedia('only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx), only screen and (min-resolution: 75.6dpcm)').matches || window.matchMedia('only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)').matches)) || (window.devicePixelRatio && window.devicePixelRatio >= 2)) && /(iPad|iPhone|iPod)/g.test(navigator.userAgent);
}
,
s we are checking different unit values (dpi
, dppx
, dpcm
) for min-resolution
because different browsers support different units. The javascript ||
s are so we can check for min-resolution
and min-device-pixel-ratio
(once again because different browsers support different media queries). Also, some browsers don't support window.matchMedia
so the other ||
is to check window.devicePixelRatio
as well.
Sep 22, 2015 at 16:11
isHighDensity
function and changing the resolution media queries to your needs rather than using the isRetina
function.
Oct 1, 2015 at 15:19
If you want it for images you can use retinajs or this code is a common response to detect it:
function isRetinaDisplay() {
if (window.matchMedia) {
var mq = window.matchMedia("only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 2.6/2), only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min-device-pixel-ratio: 1.3), only screen and (min-resolution: 1.3dppx)");
return (mq && mq.matches || (window.devicePixelRatio > 1));
}
}
mq && mq.matches || window.devicePixelRatio > 1
-moz-min-device-pixel-ratio
is not correct. It should be min--moz-device-pixel-ratio
. Please read the note here: MDN @TK123
Dec 3, 2013 at 19:41
min--moz-device-pixel-ratio
fixed that. I should note though that this entire function (even after the fix) returned true on a nexus tablet although retina css from a stylesheet wasn't executing on that machine which leads me to believe that it falsely returns true on certain devices. Maybe there's more, I only checked on a few.
Retina
is just apples way of marketing a higher density of pixels on their devices. If you want to know if a device is an Apple retina device, then you might also want to match user agent or use feature detection to tell if it's an idevice. That being said, the nexus 7(2012 model) has a 1.3dppx & the nexus 7(2013 model) has a 2dppx. So this is correct. Please view this article to see a short list of devices that have > 1dppx
Dec 5, 2013 at 23:34
Actually, the code you're using in your question is just completely right if you care only about modern browsers. (See: http://caniuse.com/#feat=devicepixelratio)
All modern browsers have it implemented, and older browsers would be just served your lower resolution images. I don't expect IE10- to show up on a retina / high-res device. Also, is using CSS checks in JavaScript not more weird than using a native window property?
Heck, devicePixelRatio browser support is even better than the resolution spec. (See: http://caniuse.com/#feat=css-media-resolution)
I'd say it's actually very safe to use, we use it in production websites with over 10 million visitors a month. Works as expected.
The only thing I'd change is the function name, as the need to load high res images doesn't technically mean the screen is retina. Actually, you don't even need a number check, as undefined > 1
results in false
.
function is_high_resolution_screen() {
return window.devicePixelRatio > 1;
}
window.devicePixelRatio
is ok to find retina display, but if the goal is to detect only retina/high-dpi displays then window.devicePixelRatio
is completely unreliable (try eg. with Chrome, set zoom level to something higher than 100% and you get a false positive no matter the display you use)
devicePixelRatio
isn't enough to ensure that an hd image is really needed. You can easily trigger the download of an heavy hd image when it is not necessary, at least you should check for devicePixelRatio
and screen logical width/height (this too isn't perfect because the behavior of both isn't standard in all latest browsers, but it addresses more cases)
devicePixelRatio
. But that's not the original answer. In a project I'm working on, we have lazy images that resize depending on the browser size. We get images sized to the exact pixel we need from a CDN. To fully utilize high-res displays we multiply the width by the devicePixelRatio
. This way we fill each device screen pixel with an image pixel. If the ratio is below 1 you can actually get a lower res image. (Zoomed out browsers.)
Jan 25, 2016 at 10:18
devicePixelRatio is not reliable at all. when you zoom in to 200%, the window.devicePixelRatio will return you 2, but you are not on a retina display.
2
but anything larger than1
can be considered HD.2
but is still greater than1
you would still want to serve up HD assets. You would serve up the higher resolution image and scale it back down—it's the same technique regardless of the device's exact pixel ratio.