imgkit分辨率_Retina高像素比的屏幕下WEB图片显示清晰度解决方案 - YangJunwei

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

一、使用 .SVG 矢量图形

这也是我常用的解决方案，与网页中常用的位图相比，矢量图的可缩放特性能适应各种分辨率，目前大多数浏览器都支持SVG格式的图片( 如果你还在用那些不支持SVG的浏览器…… >_< )，而且 .svg 格式的图片同样也使用

标签或CSS的 background-image和content:url() 属性来引用，是不是很方便。

1、使用

引用

在

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

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

$(document).ready(function(){

if(!Modernizr.svg) {

var images = $('img[data-png-fallback]