android - 如何在 Nexus 7 上的 Android KitKat 的 Webview(Android Chrome) 中获取精确的边框和大小？

Question

http://i.stack.imgur.com/Q4lHM.png

这是一个带有 1px 实心边框的框，它在 Android Webview 中的呈现方式如下。相同的 1px 边框用 2px 渲染，行为是随机的。

问题是:边框怎么设置，每次看起来都一样，细如发际线？

---

我将尝试总结我对问题的理解。首先在移动设备上，css 像素不等于设备像素。例如，在 Nexus 7(2012) 设备上 window.devicePixelRatio 1.3312500715255737(这是 css 和设备像素之间的比率)。显然，该问题与像素大小的舍入和抗反射方式有关。

在 KitKat 之前有一个解决方案——在视口(viewport)元标记中设置“target-densitydpi=device-dpi”: <meta name="viewport" id="viewport" content="width=device-width, target-densitydpi=device-dpi, target-density=device-dpi, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/> .这样我们得到 1 css px = 1 device px。但是 target-densitydpi 在 Android KitKat 中被删除了，没有其他方法可以实现这种行为。

对我来说这是一个错误。有人可以详细说明在哪里进行此类报告的最佳地点吗？

Answer 1

这不是错误。

我倾向于认为 1 个 CSS 像素相当于原生 Android 应用中的 1 个 Dip。

在 Web 中，您不应该迎合屏幕像素，就像您不希望在 native 应用程序中使用屏幕像素一样(无论平台如何)。

How should I set the border, so it looks the same every time and it's hairline thin

重点是无论屏幕尺寸如何，它都应该看起来一样。使用图像并将其用作边框图像可能会更幸运:http://www.w3schools.com/cssref/css3_pr_border-image.asp

或者存在一些适用于 Nexus 7 分辨率的视网膜屏幕的 hack:http://bradbirdsall.com/mobile-web-in-high-resolution