幾種解決移動端圖片模糊問題的方案

為了保證圖片質量，我們應該盡可能讓一個屏幕像素來渲染一個圖片像素，所以，針對不同 DPR的屏幕，我們需要展示不同分辨率的圖片。

1、media查詢

使用 media查詢判斷不同的設備像素比來顯示不同精度的圖片：

.avatar{
    background-image: url(conardLi_1x.png);
}        
@media only screen and (-webkit-min-device-pixel-ratio:2){
     .avatar{
          background-image: url(conardLi_2x.png);
      }
}        
@media only screen and (-webkit-min-device-pixel-ratio:3){
     .avatar{
          background-image: url(conardLi_3x.png);
     }
}

此方案只適用於背景圖

 

2、image-set

.avatar {
    background-image: -webkit-image-set( "conardLi_1x.png" 1x, "conardLi_2x.png" 2x);
}

此方案只適用於背景圖

 

3、srcset

使用 img標簽的 srcset屬性，瀏覽器會自動根據像素密度匹配最佳顯示圖片：

<img src="conardLi_1x.png"  srcset=" conardLi_2x.png 2x, conardLi_3x.png 3x">

 

4、JavaScript拼接圖片url

使用 window.devicePixelRatio獲取設備像素比，遍歷所有圖片，替換圖片地址：

const dpr = window.devicePixelRatio;

const images =  document.querySelectorAll('img');

images.forEach((img)=>{
  img.src.replace(".", ‘@${dpr}x.’); 
})