CSS背景圖片在移動設備上模糊

Question

設定：

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

我用按鈕創建了一個480 dpi的精靈。 其尺寸約為2000像素* 1000像素。 在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

要對標簽進行元標記，該問題已在設備上修復，但是從webkit中刪除了target-densitydpi，請參閱http://trac.webkit.org/changeset/119527，因此我無法使用它。

任何想法如何解決這個問題？ 我正在使用phonegap為Android構建應用程序

Answer 1

當為高清顯示（例如iPhone上的視網膜顯示）創建圖像時，這可能會有所幫助，DPI並不是真正的問題。 它更多地與圖像大小有關。 如果您的按鈕將顯示為50x50像素，則您創建的圖像應為100x100像素。 然后在您的CSS中設置background-size：50px;

它必須是2倍的比率才能顯示水晶般清晰。