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

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

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

Answer 1

这可能会有所帮助，在为iPhone等视频显示器等高清显示器创建图像时，DPI并不是真正的问题。它更多的是图像尺寸本身。如果您的按钮将显示为50x50像素，则您创建的图像应为100x100像素。然后在你的CSS中设置background-size：50px;

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

CSS背景图像在移动设备上模糊

1 个答案: