Android 使用CSS背景大小在高PPI屏幕上的WebView中显示模糊图像

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

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

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

在Android的Chrome浏览器上，这张图片看起来非常清晰。然而，在网络视图中，图像是模糊的——就好像是放大了72dpi

奇怪的是，如果我指定：

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

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

我在我的

AndroidManifest.xml

中添加了类似于

android:hardwareAccelerated=“true”

和

android:anyDensity=“true”

的内容，但似乎没有任何区别

有人有什么想法吗？

试试这个

img{
image-rendering: optimizeQuality;
}

---

强制css中的硬件加速将为您提供“清晰”的图像

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

尝试添加：

image-rendering: -webkit-optimize-contrast;

---

更多信息

可能与此有关？您找到答案了吗？我也面临同样的问题……我想是的。使用宽度或高度为奇数像素的背景图像时，使用

50%50%

居中会将图像对齐到半像素，导致图像模糊。如果我将图像四舍五入到均匀的像素宽度和高度，或者对齐到

左上角

，图像看起来很清晰。谢谢，但这似乎并不能解决问题（在Android 4.3.1上测试）。我认为Chrome或Android不支持这种特性——我没有注意到任何改进——webview中的图像看起来仍然过时了，即使有了这种风格的更新。

image-rendering: -webkit-optimize-contrast;