android - 在高 PPI 屏幕上，使用 CSS background-size 在 WebView 中产生模糊的图像

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;
}

在 Android 版 Chrome 上，此图像看起来非常清晰。然而，在 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/