你有兼容 retina 屏幕的经历吗？如果有，在什么地方使用了何种技术？

[Rashomon511]

retina 是苹果推出的新型屏幕，由4个原像素点去描述一个新像素点（即压缩了2倍），且存在0.5个像素点这样的描述，所以需要兼容。 当一个图像在标准设备下全屏显示时，一位图像素对应的就是一设备像素，导致一个完全保真的显示，因为一个位置像素不能进一步分裂。而当在Retina屏幕下时，他要放大四倍来保持相同的物理像素的大小，这样就会丢失很多细节，造成失真的情形。换句话说，每一位图像素被乘以四填补相同的物理表面在视网膜屏幕下显示。

解决方法就是通过制作两种不同的图形，一张是普通屏幕的图片，另外一种是Retina屏幕的图形，而且Retina屏幕下的图片是普通屏幕的两倍像素

• 直接加载2倍大小的图片

<img class="pic" src="pic.png" height="200px" width="300px"/>
 
<script type="text/javascript">
$(document).ready(function () {
    if (window.devicePixelRatio > 1) {
        var images = $("img.pic");
        images.each(function(i) {
            var x1 = $(this).attr('src');
            var x2 = x1.replace(/(.*)(.w+)/, "$1@2x$2");
            $(this).attr('src', x2);
        });
    }
});

• Image-set控制

#logo {
    background: url(pic.png) 0 0 no-repeat;
    background-image: -webkit-image-set(url(pic.png) 1x, url([email protected]) 2x);
    background-image: -moz-image-set(url(pic.png) 1x,url(images/[email protected]) 2x);
    background-image: -ms-image-set(url(pic.png) 1x,url(images/[email protected]) 2x);
    background-image: -o-image-set(url(url(pic.png) 1x,url(images/[email protected]) 2x);

• 使用@media控制

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5), /* 注意这里的写法比较特殊 */
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
    #logo {
        background-image: url([email protected]);
        background-size: 100px auto;
    }
}