Detect retinal imaging (HD) on the server side

Question

I found many questions about Retina Display, but none of the answers were server side.

I would like to provide another image according to the screen, for example (in PHP):

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

Do you see a way to handle this?

I can only submit the test in JavaScript by setting a cookie. However, this requires an initial exchange. Does anyone have a better solution?

Cookie Setting Code:

 (function(){ if( document.cookie.indexOf('device_pixel_ratio') == -1 && 'devicePixelRatio' in window && window.devicePixelRatio == 2 ){ document.cookie = 'device_pixel_ratio=' + window.devicePixelRatio + ';'; window.location.reload(); } })(); 

Answer 1

Good, since it seems that there is no better way at 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 the .php function:

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

Answer 2

Since you do not specify which precedent you need, and I really do not see a precedent for the server, knowing what permission the client wants to get in it (in my opinion, the client must decide) here is my suggestion:

Use something like Retina.js or use the attribute srcset <img src="low-res.jpg" srcset="medium-res.jpg 1.5x, high-res.jpg 2x">

This way you can also use image caching. which you cannot do if you have one URL for two different image sizes. Even if its automatically created / updated image caching works using headers with the latest change or etag.

Answer 3

I don’t know exactly how to do this, but a clean way for PHP to understand this is to use get_browser , which returns the browser version and some features. This may tell you some information that MAY cause it to run on the retina.

http://php.net/manual/en/function.get-browser.php

Alternatively, you can watch $_SERVER['HTTP_USER_AGENT'] , which will tell you about the device. then you need a list of devices that have retinas, and do a comparison to get an answer.

Performing retinal detection in JS is probably much simpler and more reliable.