1

设置：

<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

元标记问题已在设备上解决，但是从 webkit 中删除了 target-densitydpi，请参阅http://trac.webkit.org/changeset/119527所以我不能使用它。

任何想法如何解决这个问题？我正在为 android 构建一个带有 phonegap 的应用程序

4

1 回答 1

0

这可能会有所帮助，当为高清显示器（如 iPhone 上的视网膜显示器）创建图像时，DPI 并不是真正的问题。它更多的是关于图像大小本身。如果您的按钮将显示为 50x50 像素，那么您创建的图像应该是 100x100 像素。然后在你的 CSS 中设置 background-size:50px;

它必须是 2 倍的比例才能显示得非常清晰。

于 2013-07-28T03:40:20.813 回答