Retina高像素比的屏幕下WEB图片显示清晰度解决方案

好久没打开家里的老爷机PC了，浏览网页时候很是不习惯，自家的一些网页中图片显示也是相当的不爽，今天整理一下在Retina等高清显示屏下，网页中图片的显示兼容问题。

一、使用 .SVG 矢量图形

这也是我常用的解决方案，与网页中常用的位图相比，矢量图的可缩放特性能适应各种分辨率，目前大多数浏览器都支持SVG格式的图片（ 如果你还在用那些不支持SVG的浏览器…… >_< ），而且 .svg 格式的图片同样也使用 标签或CSS的 background-image和content:url() 属性来引用，是不是很方便。

1、使用 引用

<img src="logo.svg" data-png-fallback="logo.png" width="200" height="100" />

在 引用中，定义了一个 data-png-fallback 属性，然后引入 jQuery 和 Modernizr 判断当前浏览器是否支持 SVG ，不支持的话使用 .png 替换 .svg。

注：这个 Modernizr 没有一个完整的 Modernizr.js，需要按自己需要的模块来自行选择下载。

$(document).ready(function(){
    if(!Modernizr.svg) {
        var images = $('img[data-png-fallback]');
        images.each(function(i) {
            $(this).attr('src', $(this).data('png-fallback'));
        });
    }
});

2、使用 CSS 引用

/* CSS background-image */
.image {
    background-image: url(logo.svg);
    background-size: 200px 100px;
    width: 200px;
    height: 100px;
}
 
/* CSS content:url() */
.image:before {
    content: url(example.svg); /* width and height do not work with content:url() */
}

同样的引入 Modernizr ，再将 CSS 改写成以下形式即可：

.image {
    background-image: url(logo.png);
    background-size: 30p0x 200px;
}
 
.svg {
    .image {
        background-image: url(logo.svg);
    }
}

不过 SVG 矢量图也有局限，最好是使用于比如 LOGO、小图标什么的，其它的大图片应用起来会很扯淡。制作 SVG 格式图片，推荐使用 Adobe Illustrator 、inkscape等，两者都分区有win和mac版。

二、使用 logo@2x.jpg 的形式

这种方法很多网站都在应用。以 logo.jpg 为例，制作两张不同分辨率的图片，200*100px 和 400*200px，前者用于一般显示屏下CSS引用，@2x图片应用于Retina屏。

<img src="logo.jpg" style="width:200px;height:100px;" />
<img src="logo@2x.jpg" style="width:200px;height:100px;" />

再通过 JS 让图片在普通屏幕和 Retina 屏幕下自动适配，看代码：

$(document).ready(function () {
    if (window.devicePixelRatio > 1) {
        var images = $("img.photo");
        images.each(function(i) {
            var x1 = $(this).attr('src');
            var x2 = x1.replace(/(.*)(\.\w+)/, "$1@2x$2");
            $(this).attr('src', x2);
        });
    }
});

注意：在Retina屏幕下，logo.jpg 和 logo@2x.jpg 同时被加载，宽带有限的服务器还是少用，拖累页面加载速度。

三、响应式CSS3 Media Queries的形式

还是以 logo.png 和 logo@2x.png 为例，两张不同分辨率的图片，200*100px 和 400*200px。

#logo {
    width: 200px;
    height: 100px;
    background: url(logo.png) 0 0 no-repeat;
}

然后通过 Meta Queries 判断设备最小像素比，比如苹果的Retina屏是2，三星的Pad是1.5，于是普通屏幕引用logo.png，Reitna屏等引用logo@2x.png。

先来看看像素比大于等于1.5的情况吧：

@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(logo@2x.png);
               background-size: 200px auto;
           }
}

只针对 Retina 屏的话，直接判断像素比等于2的情况：

@media only screen and (-webkit-device-pixel-ratio: 2),
       only screen and (-moz-device-pixel-ratio: 2),
       only screen and (-o-device-pixel-ratio: 2/1),
       only screen and (device-pixel-ratio: 2) {
            #logo {
                background-image: url(logo@2x.png);
                background-size: 200px auto;
            }
}

这种解决方案就是代码会冗余！

至此，几种我用过的方法整理到这里，各位同学自行取舍吧！