安卓瀏覽器看背景圖片有些裝置會模糊解決方案

用同等比例的圖片在PC機上很清楚，但是手機上很模糊，原因是什麼呢。

經過研究，是devicePixelRatio作怪，因為手機解析度太小，如果按照解析度來顯示網頁，這樣字會非常小，所以蘋果當初就把iPhone 4的960640解析度，在網頁裡只顯示了480320，這樣devicePixelRatio＝2。現在android比較亂，有1.5的，有2的也有3的。

想讓圖片在手機裡顯示更為清晰，必須使用2x的背景圖來代替img標籤（一般情況都是用2倍）。例如一個div的寬高是100100，背景圖必須得200200，然後background-size:contain;，這樣顯示出來的圖片就比較清晰了。

程式碼可以如下:

[CSS] 純文字檢視 複製程式碼
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;都可以