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倍的比率才能显示水晶般清晰。