首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >检测服务器端的视网膜(HD)显示

检测服务器端的视网膜(HD)显示
EN

Stack Overflow用户
提问于 2013-03-06 05:30:53
回答 2查看 10.8K关注 0票数 21

我发现了许多关于Retina Display的问题,但没有一个答案是关于服务器端的。

我想根据屏幕提供一个不同的图像,例如(PHP中的):

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

你能想出解决这个问题的办法吗?

我只能想象在JavaScript中进行测试,设置Cookie。但是,这需要初始交换来设置它。谁有更好的解决方案?

Cookie设置代码:

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

回答 2

Stack Overflow用户

回答已采纳

发布于 2013-03-06 05:48:28

好吧,由于目前似乎没有更好的方法,下面是我结合JS、PHP和Cookie的解决方案。

我希望将来会有更好的答案。

<?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 $is_retina;$GLOBALS['is_retina'];

票数 19
EN

Stack Overflow用户

发布于 2017-05-07 01:36:05

由于您没有指定具体的用例,我也不认为服务器会知道客户端想要的图像的分辨率(在我看来,应该由客户端决定),下面是我的建议:

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

这样,您还可以利用浏览器对图像进行缓存。如果你有两个不同图片大小的url,你就不能这样做。即使它是一个自动创建/更新的图像缓存,也可以使用last-modified或etag头文件。

票数 10
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/15234519

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档