56

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?

7
  • 1
    Retina specifically or just HD support in general? IIRC Retina's pixel ratio is 2 but anything larger than 1 can be considered HD. Oct 30, 2013 at 17:32
  • 1
    @AndréDion So the reason why I am doing this in js is to determine which image to serve (regular or 2x the size). So I believe I need just retina and not hd. Because if this function returns true I serve an image 2 times the size.
    – user967451
    Oct 30, 2013 at 17:58
  • if you want it for images you can use this retinajs.com
    – Juan
    Oct 30, 2013 at 17:59
  • @TK123 I think the condition you have is safe to do what you describe. Even if the device's pixel ratio isn't exactly 2 but is still greater than 1 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. Oct 30, 2013 at 18:08
  • @AndréDion Now would that be for any >1? Why not about >1.4? Dec 6, 2013 at 0:36

4 Answers 4

48

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.

View Full Article

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);
}
11
  • 16
    Checked isRetina() function today on my MacBook with Retina - it doesn't worked.
    – ujeenator
    Jul 23, 2015 at 17:43
  • 1
    What's the reason for using both CSS 'or' (,) and JS 'or' (||)?
    – binaryfunt
    Sep 22, 2015 at 15:13
  • 1
    @BinaryFunt for the CSS ,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
  • 1
    @JomarSevillejo At the time of writing this, the only retina displays Apple had were the iPad, iPhone, and iPod. The only purpose of this line is to check the useragent of the browser, which should not be trusted anyway. It was more an example than anything. I would suggest using the isHighDensity function and changing the resolution media queries to your needs rather than using the isRetina function. Oct 1, 2015 at 15:19
  • 1
    @NovitchiS interesting, according to the spec "The <resolution> value is a positive <number> immediately followed by a unit identifier" (emphasis mine) so it looks like MS isn't following spec. i will add a note to the answer. Jan 3, 2019 at 16:33
35

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)); 
        }
    }
5
  • 1
    Great thanks, to play it safe I added my previous check to this one mq && mq.matches || window.devicePixelRatio > 1
    – user967451
    Oct 30, 2013 at 19:45
  • 2
    -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
  • @Adam Merrifield Thank you, your comment came at the right time. A coworker on firefox in a linux machine found that the function was returning true even though he was not on a retina device. Updating to 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.
    – user967451
    Dec 5, 2013 at 21:37
  • @TK123 The function is working correctly. It measures the density of pixels of an output device. 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
  • If you want approximately an equivalent but only in CSS, see gist.github.com/marcedwards/3446599 Also note that you might not even need retinajs if you specify higher res equivalents in your image tag itself, see stackoverflow.com/a/43823483/32453
    – rogerdpack
    May 23, 2017 at 20:14
21

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;
}
4
  • 2
    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)
    – guari
    Jan 24, 2016 at 15:37
  • 1
    Yeah, sure, but the browser would still profit from the higher res images because you would have more pixels to display them on. Which once again proves just checking the pixelratio instead of the type if screen if preferred in most of the cases. Also, if you look at TS's comment here: stackoverflow.com/questions/19689715/…, you can see he's asking for the best way to know when to serve high-res images. This (his) solution does exactly that. Jan 24, 2016 at 20:25
  • mm.. what if the image has a percentage size like usual in responsive layout or if it is a fullscreen background? Checking only 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)
    – guari
    Jan 24, 2016 at 23:53
  • 2
    Yeah, of course, it depends on the situation. If your images are sized based on a percentage it's only logical you'll need something more delicate than just 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
6

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.

3
  • 6
    But your screen is still able to render all the extra pixels available. That's why device pixel ratio is a great feature. Jan 30, 2017 at 14:08
  • Agreeed with Lee Le. At zoom 200%, current Chrome returns double the original value. That is, when you zoom, devicePixelRatio also "zooms". It's not a reliable value for detecting zoom or retina support. Feb 12, 2020 at 12:02
  • Good point Lee Le. Especially when trying to make an HTML canvas look right on a retina display using this technique: developer.mozilla.org/en-US/docs/Web/API/Window/… You can't actually use devicePixelRatio as advertised here on MDN since it scales wrongly when manually zoomed in by the user. There needs to be a separate device scale variable for user zoom and retina displays
    – keithphw
    Apr 25, 2020 at 5:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy