android - Android WebView：hdpi 屏幕上奇怪的 1px 线条渲染

Question

我有一个显示一些生成的 HTML 的 WebView。内容包括一个列表，并且列表项 CSS 包括border-top: 1px。

在 hdpi 设备上，WebView 尝试将此行缩放 1.5 倍。有时线条呈现为1 个真实像素，有时它们呈现为2 个真实像素。实际上，它似乎交替选择 1 或 2 个像素。

我正在专门寻找一个不涉及<meta name="viewport" content="target-densitydpi=device-dpi" />. 我确实希望 WebView 能够处理缩放，只要 1px 行一致呈现。

Answer 1

我认为唯一的解决方案是您不想听到的：不要缩放 WebView 内容，而是使用 CSS 修复它。在 CSS 中使用 em 而不是 px 可能会有一些运气。

Answer 2

不要使用边框，而是使用 1px 的 box-shadow inset，如下所示：

 -webkit-box-shadow:inset 0 1px 0 0 #000000;
 box-shadow:inset 0 1px 0 0 #000000;