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 中被删除了,没有其他方法可以实现这种行为。
对我来说这是一个错误。有人可以详细说明在哪里进行此类报告的最佳地点吗?
最佳答案
这不是错误。
我倾向于认为 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
关于android - 如何在 Nexus 7 上的 Android KitKat 的 Webview(Android Chrome) 中获取精确的边框和大小?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20348710/