高清屏及适配不同设备的方案总结

一、关于设备像素比（devicePixelRatio）

出处：高清屏概念解析与检测设备像素比的方法

所谓设备像素比（devicePixelRatio[dpr]）指的就是物理像素(physical pixel)和独立像素(device-independent pixels** [dips]**)的比例。

基本公式就是:设备像素比 = 物理像素 / 设备独立像素 //在某个方向上，x或者y

物理像素：就是我们经常所说的分辨率，如iphone 6 的分辨率就是750x1334

独立像素：就是手机的实际视窗，如iphone 6的视窗就是375x667

所以iphone 6的设备像素比 = 750/375 = 2

当devicePixelRatio值等于1时（也就是最小值），那么它普通显示屏

当devicePixelRatio值大于1(通常是1.5、2.0)，那么它就是高清显示屏。

二：适配方案

出处：高清屏概念解析与检测设备像素比的方法

1.Media Queries媒体查询（只能用于背景图片）

通过-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio进行媒体查询，对不同dpr的设备，做一些样式适配

.css{/* 普通显示屏(设备像素比例小于等于1.3)使用1倍的图 */ 
     background-image: url(img_1x.png);
 }
@media only screen and (-webkit-min-device-pixel-ratio:1.5){
 .css{/* 高清显示屏(设备像素比例大于等于1.5)使用2倍图  */
     background-image: url(img_2x.png);
   }
 }

2.JavaScript的解决方案

使用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);
      });
   }
 });

3.使用SVG矢量图像