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

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

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

一、使用 .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 属性,然后引入 jQueryModernizr 判断当前浏览器是否支持 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;
            }
}

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

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