Question

我在Android WebView中显示高dpi图像时遇到问题。

首先，我在HTML中使用此指令：

<meta name="viewport" content="width=device-width" />

背景图片在我的CSS中指定如下：

.button {
    width: 100px;
    height: 50px;
    /* button.png is really 200x100 */
    background: url('../img/button.png') no-repeat 50% 50%;
    background-size: contain;
}

在Chrome for Android上，此图片显得非常清晰。然而，在WebView中，图像模糊 - 好像是72dpi被放大了。

奇怪的是，如果我指定：

<meta name='viewport' content='target-densitydpi=device-dpi'>

然后图像看起来很清晰，尽管页面的其余部分也是半分辨率。

我已将android:hardwareAccelerated="true"和android:anyDensity="true"等内容添加到AndroidManifest.xml，但似乎没有任何区别。

有没有人有任何想法？

Answer 1

试试这个，

img{
image-rendering: optimizeQuality;
}

Answer 2

强制css中的硬件加速会给你一个'清晰'的图像。

-webkit-transform: translate3d(0,0,0);

Answer 3

尝试添加：

image-rendering: -webkit-optimize-contrast;

更多信息https://css-tricks.com/almanac/properties/i/image-rendering/

在高PPI屏幕上使用CSS background-size在WebView中显示模糊图像

3 个答案: