我发现了许多关于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();
}
})();
发布于 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'];
发布于 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头文件。
https://stackoverflow.com/questions/15234519
复制相似问题