使用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等
