最近在用手機做網站的時候，發現，用同等比例的圖片在PC機上很清楚，但是手機上很模糊，原因是什麼呢？
經過研究，是devicePixelRatio作怪，因爲手機分辨率太小，如果按照分辨率來顯示網頁，這樣字會非常小，所以蘋果當初就把iPhone
4的960*640分辨率，在網頁裏只顯示了480*320，這樣devicePixelRatio＝2。現在android比較亂，有1.5的，有2的也有3的。
想讓圖片在手機裏顯示更爲清晰，必須使用2x的背景圖來代替img標籤（一般情況都是用2倍）。例如一個div的寬高是100*100，背景圖必須得200*200，然後background-size:contain;，這樣顯示出來的圖片就比較清晰了。
代碼可以如下：
background:url(../images/icon/all.png) no-repeat center center;-webkit-background-size:50px 50px;background-size: 50px 50px;display:inline-block; width:100%; height:50px; background-size:contain;或者指定都可以，大家試試！
要是還沒有解決，就說明手機或者瀏覽器分辨率了。