CSS背景圖像上移動設備模糊

Question

設置：

<meta name="viewport" content="width=device-width, 
         initial-scale=1, maximum-scale=1.0, user-scalable=no"/> 

我已創建帶有按鈕的480 dpi的精靈。它的尺寸大約是2000px * 1000px。在css像素比例爲2的仿真器中，它必須等於320 dpi，那麼css圖像看起來很好。

.button-logo { 
    background: url(../assets/img/sprite_480.png) no-repeat !important; 
    background-position: -4px -139px !important; 
    background-size: 790% !important; 
} 

但是，當我在320 dpi的真實設備上測試它們時，圖像模糊不清。任何想法爲什麼圖像在設備上變得模糊？

當我添加

target-densitydpi=device-dpi 

到meta標籤的問題是固定在設備上，但是目標densitydpi從WebKit的刪除，請參閱http://trac.webkit.org/changeset/119527所以我不能使用它。

任何想法如何解決這個問題？我正在構建一個應用程序，用於android

Answer 1

這可能有助於在創建高清顯示圖像（如iPhone上的視網膜顯示）時，DPI不是真正的問題。這更多的是關於圖像大小本身。如果您的按鈕將顯示爲50x50像素，則您創建的圖像應爲100x100像素。然後在你的CSS中設置background-size：50px;

它必須是一個2倍的比例，才能讓它看起來晶瑩剔透。