Detect Retina (Hd) Display on the Server Side

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

<?php
    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();
    }
  }
})();
</script>
<?php } ?>

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'];

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

How to detect if iPhone has retina display or not?

You must consider the fact that you are trying to get client side information on the server side.

It would seem that you are unable to detect the display with pure PHP or Zend framework.

It furthermore seems like the UserAgent information from the client, that you might access from PHP is based upon the OS, not the hardware, and thusly does not help you.

You might be interested in reading the following article which much more eloquently and thoroughly explains the issues.

http://www.bdoran.co.uk/2010/07/19/detecting-the-iphone4-and-resolution-with-javascript-or-php/

Good luck!

What are best practices for detecting pixel ratio/density?

You should leverage the manufacturer's hint via the <meta name="viewport" content="width=device-width"/> or @-ms-viewport {width:device-width} feature. It basically exposes the default zoom the device manufacturer considers optimal given the pixel density of the screen. After you do that, when you call window.innerWidth it will give you what your original equation was intended for but without relying on a measurement of pixel density.

Avoid relying on window.devicePixelRatio for anything. Its meaning and the value it returns is currently in a state of flux and anything you make right now based around it will most likely break very soon.

Note:
Meta viewport only works on Android, iOS, and Windows Phone 8. @-ms-viewport only works (properly) on IE10 Metro and can interfere with proper Meta viewport behavior on Windows Phone 8.

---

Related Topics