21

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

I would like to deliver a different image according to the screen, ex (in PHP):

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

Can you see a way of dealing with this?

I can only imagine a test in JavaScript, setting a Cookie. However this requires an initial exchange to set it. 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();
  }
})();
4

3 回答 3

20

好吧，因为目前似乎没有更好的方法，这是我结合 JS、PHP 和 Cookies 的解决方案。

希望以后有更好的答案

<?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 } ?>

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

然后在我可以使用以下 GLOBAL 之后：

global $is_retina;或者$GLOBALS['is_retina'];

于 2013-03-05T21:48:28.067 回答
10

由于您没有指定您需要什么确切的用例，而且我并没有真正看到服务器的用例知道客户端想要它的图像的分辨率（我认为客户端应该决定）这是我的建议：

使用类似Retina.js或使用 srcset 属性<img src="low-res.jpg" srcset="medium-res.jpg 1.5x, high-res.jpg 2x">

这样，您还可以利用图像的浏览器缓存。如果您有一个 url 用于两种不同的图像尺寸，您就无法做到这一点。即使它使用 last-modified 或 etag 标头自动创建/更新图像缓存。

于 2017-05-06T17:36:05.330 回答
1

我不确定到底是怎么做的，但是解决这个问题的纯 PHP 方法是使用get_browser它返回浏览器版本和一些功能。这可能会告诉你一些可能导致它是否在视网膜上运行的信息。

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

此外，您可以查看$_SERVER['HTTP_USER_AGENT']哪个会告诉您有关设备的信息。那么您需要一个具有视网膜的设备列表并进行比较以获得答案。

在 JS 中进行视网膜检测可能更容易且万无一失。

于 2013-03-05T21:48:24.503 回答