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

标签 android css google-chrome webview android-4.4-kitkat

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/

相关文章:

javascript - Google Chrome 扩展程序看不到点击次数?

java - 如何管理动态创建按钮的 onClickListener?

android - 具有不同页面布局的 viewpager 的操作栏选项卡

java - 如何检索 JSONObject 子字段?

html - 使用 HTML 和 CSS 在一行上的标题间距不均匀

css - 溢出隐藏断 Chrome

android - 如何在 Android 上使用 Apache Tika

jquery - 选项卡不适用于生成的服务 ID

javascript - 从 'elementFromPoint' 函数隐藏 div 中的元素

javascript - 谷歌浏览器上传速度与 Firefox