使用css：

#myimage {

width:?400px;

height:?300px;

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

}

//?這里主要針對的是?Android?的一些設(shè)備

@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等