css 解决同一张图片在不同设备下不清晰

使用css：

#myimage {

width: 400px;

height: 300px;

background: url(res.jpg) 0 0 no-repeat;

}

// 这里主要针对的是 Android 的一些设备

@media

screenand(-webkit-min-device-pixel-ratio: 1.5),

screenand(min--moz-device-pixel-ratio: 1.5),

screenand(-o-min-device-pixel-ratio: 3/2),

screenand(min-device-pixel-ratio: 1.5) {

#myimage {

background-image: url(res.jpg);

}

}

// 如果你想针对苹果的, 则可以直接使用:

@mediaonlyscreenand(-webkit-device-pixel-ratio: 2),

onlyscreenand(-moz-device-pixel-ratio: 2),

onlyscreenand(-o-device-pixel-ratio: 2/1),

onlyscreenand(device-pixel-ratio: 2) {

#myimage {

background-image: url(res.jpg);

}

}

使用 js 判断：

if (window.devicePixelRatio > 1) {

var images = $("img");

images.each(function(i) {

var x1 = $(this).attr('data-src');

$(this).attr('src',x1);

});

}

使用矢量图：

SVG, Fonts等