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寬中（獨立像素）。