手机

使用js对“window.devicePixelRatio”进行判断，然后根据对应的值给Retina屏幕选择图像。 

$(document).ready(function(){
  if (window.devicePixelRatio > 1) {
    var lowresImages = $('img'); 
    images.each(function(i) {
      var lowres = $(this).attr('src');
      var highres = lowres.replace(".", "@2x.");
      $(this).attr('src', highres);
    });
  }
});

其中Retina.js是为Retina而生的，基本上实现了上面的所有功能。

 

 

<link rel="stylesheet" media="screen and (min-device-width : 320px) and (max-device- 480px)" href="iphone.css" />

 

<link rel="stylesheet" media="screen and (min-device-width : 768px) and (max-device-width : 1024px)" href="ipad.css" />