Detect Retina Display

What is the best way to detect retina support on a device using JavaScript?

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);
}

detect retina (HD) display on the server side

Alright since it seems there's no better way for the moment, here is my solution combining JS, PHP and Cookies.

I hope there will be better answers in the future

    if( isset($_COOKIE["device_pixel_ratio"]) ){
        $is_retina = ( $_COOKIE["device_pixel_ratio"] >= 2 );

        if( $is_retina)
            $thumbnail = get_image( $item_photo, 'thumbnail_retina' ) ;
        else
            $thumbnail = get_image( $item_photo, 'thumbnail' ) ;

    }else{
?>
<script language="javascript">
(function(){
  if( document.cookie.indexOf('device_pixel_ratio') == -1
      && 'devicePixelRatio' in window
      && window.devicePixelRatio == 2 ){

    var date = new Date();
    date.setTime( date.getTime() + 3600000 );

    document.cookie = 'device_pixel_ratio=' + window.devicePixelRatio + ';' +  ' expires=' + date.toUTCString() +'; path=/';
    //if cookies are not blocked, reload the page
    if(document.cookie.indexOf('device_pixel_ratio') != -1) {
        window.location.reload();
    }
  }
})();

in function.php :

add_action( 'init', 'CJG_retina' );

function CJG_retina(){

    global $is_retina;  
    $is_retina = isset( $_COOKIE["device_pixel_ratio"] ) AND $_COOKIE["device_pixel_ratio"] >= 2;
}

Then after I can use the following GLOBAL:

global $is_retina; or $GLOBALS['is_retina'];

How do you detect a Retina Display in Java?

I would get the value this way -

public static boolean hasRetinaDisplay() {
  Object obj = Toolkit.getDefaultToolkit()
      .getDesktopProperty(
          "apple.awt.contentScaleFactor");
  if (obj instanceof Float) {
    Float f = (Float) obj;
    int scale = f.intValue();
    return (scale == 2); // 1 indicates a regular mac display.
  }
  return false;
}

How to check for retina display in jQuery and serve double-resolution images accordingly?

Check if window.devicePixelRatio is higher than 1, and replace images with their high-resolution versions if it is.

Detecting a retina display iPad with javascript

I haven't tested this, but here's an approach I think might work. I'll do a jsbin for it when I get time.

Because all devices (to the best of my knowledge) adjust for devicePixelRatio before passing the value to CSS media queries we can (in slightly pseudo code)

1. measure window.devicePixelRatio and screen.availWidth

2. Write a style tag to the head which includes a media query something like the following

   #my-test-el {
     display: none;
     visibility: visible;
   }
   
   @media screen and (min-device-width:screen.availWidth) {
     #my-test-el {
    visibility: hidden;
     }
   }
   

3. Append

   to the page

4. Read off the style.visibility attribute. If it equals hidden then the css value is the same value as screen.availWidth => screen.availWidth has been preadjusted for dpr.

edit It works! http://jsbin.com/IzEYuCI/3/edit. I'll put together a modernizr plugin too

edit And here's the pull request to get it in Modernizr - https://github.com/Modernizr/Modernizr/pull/1139. please upvote if you'd find it useful

How to detect Retina HD display?

Below works very well to detect type of display on iPhone6Plus.

if ([[UIScreen mainScreen] respondsToSelector:@selector(scale)] && [[UIScreen mainScreen] scale] == 3.0)
    NSLog(@"Retina HD"); 
else
    NSLog(@"Non Retina HD");

Retina display image resolution using media queries

You'd probably cover all retina displays according to this article by CSS-tricks. I guess you already found that out. Another option is to use SVG's, but I wouldn't use them for background images. The SVG format is perfect for two dimensional shapes and icons, altough icon fonts render faster.

As for the question "how to add media queries for screen size to media queries for retina display", the code you posted should work fine. Another way would be to just add the second clause to the first ones, like so:

@media
only screen and (-webkit-min-device-pixel-ratio: 2) and ( max-width: 2000px),
only screen and (   min--moz-device-pixel-ratio: 2) and ( max-width: 2000px),
only screen and (     -o-min-device-pixel-ratio: 2/1) and ( max-width: 2000px),
only screen and (        min-device-pixel-ratio: 2) and ( max-width: 2000px),
only screen and (                min-resolution: 192dpi) and ( max-width: 2000px),
only screen and (                min-resolution: 2dppx) and ( max-width: 2000px) { 
    .holer {
        background:url("background@2x.png");
    }
}

If you're using SCSS, create a mixin as explained here. This would save you alot of time and drastically improves readability.

---

Related Topics