devicePixelRatio手机图片模糊的缘由

1、移动设备图片模糊问题

手机上图片模糊问题缘由就是一个像素在电脑上和手机上表明的实际像素的不一样。

咱们在样式表中使用的px（独立像素）单位其实并不必定表明着实际的一个像素（物理像素），这还要看硬件的设置。例以下面盗来的图片，右图一个独立像素等于四个像素，左图一个独立像素等于一个像素。devicePixelRatio为表示这个比例的值，若是设备宽度为640物理像素，320独立像素，则devicePixelRatio为640/320=2，一个独立像素等于4个物理像素。

        

因此，若是切了一张10像素宽高的图放在devicePixelRatio为2的屏幕中，设置宽高为10px，实际上就是在20像素宽高的区域中放了一张10像素的图片，而图片被拉长为20像素，这样就糊了。若是要完美显示得放一张20像素宽高的图。

2、解决办法

因此咱们能够根据设备的devicePixelRatio给出不一样的样式。

若是用脚本能够用window.devicePixelRatio进行判断，目前在移动设备基本支持该属性。

用css能够用媒体查询，例如：

@media only screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5){

         //样式

      }

 

@media only screen and (-webkit-min-device-pixel-ratio : 2),only screen and (min-device-pixel-ratio : 2){

        //样式

      }

 

    注意：用媒体查询device-width的值在ios和android是不同的，一个表明独立像素一个表明物理像素，就跟用window.screen.width取屏幕宽度同样，在两个系统上取得的值也是不同的。

如今主流的智能手机devicePixelRatio大部分为2，一部分为1.5，3的比较少，1的则更少（PC为1）。

3、关于viewport

    这里主要讲一下width和scale两个属性，通过粗略测试：

    Ios上：若是没有设置width而设置了initial-scale，那么width = device-width / initial-scale；若是没有设置initial-scale而设置了width，那么scale=device-width/width。

    Android上：若是没有设置width而设置了initial-scale，那么width = device-width；若是没有设置initial-scale而设置了width，那么scale=device-width/width。

    因此，若是想让图片在手机上显示正常，也能够利用viewport，例如在iphone5s上，device-width为320，物理像素宽度为640，能够在viewport中设置width为640（独立像素），scale为0.5，则图片能够在屏幕中无缺显示，至关于把640宽压到了320宽中（独立像素）。