如何在Nexus 7的Android KitKat的Webview（Android Chrome）中获得精确的边框和尺寸？(How to get precise borders and sizes i

如何在Nexus 7的Android KitKat的Webview（Android Chrome）中获得精确的边框和尺寸？(How to get precise borders and sizes in Android KitKat's Webview(Android Chrome) on Nexus 7?)

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

这是一个带有1px固体边框的框，它在Android Web视图中像这样呈现。 相同的1px边框以2px呈现，行为是随机的。

问题是：我应该如何设置边框，每次看起来都一样，而且细线很细？

---

我会尽量总结我对这个问题的理解。 首先在移动设备上，css像素不等于设备像素。 例如，在Nexus 7（2012）设备上的window.devicePixelRatio 1.3312500715255737（这是CSS和设备像素之间的比率）。 显然这个问题与像素大小是如何被舍入和反平衡有关。

在KitKat之前有一个解决方案 - 在视口元标记中设置“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个设备px。 但是target-densitydpi在Android KitKat中被切断了，没有其他办法可以获得这种行为。

对我来说这是一个错误。 有人能详细说明最好的地方是哪里报道吗？

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

This is a box with 1px solid border and it gets rendered like this in an Android Webview. Same 1px borders get rendered with 2px and the behaviour is random.

The question is: How should I set the border, so it looks the same every time and it's hairline thin?

---

I'll try to summarize my understanding of the problem. First on a mobile device, a css pixel is not equal to a device pixel. For example on a Nexus 7(2012) device window.devicePixelRatio 1.3312500715255737 (this is the ratio between the css and device pixels). Apparently the problem is related to how pixel sizes are rounded and antialized.

There was a solution before KitKat - setting "target-densitydpi=device-dpi" in the viewport meta tag: <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"/>. This way We get 1 css px = 1 device px. But target-densitydpi got cut out in Android KitKat and there is no other way to get this behaviour.

For me this is a bug. Could someone elaborate where is the best place to report it as such?

最满意答案

这不是一个错误。

我倾向于将1个CSS像素等同于1个原生Android应用程序中的Dip。

在网络中，您不希望迎合屏幕像素，因为您不希望在本机应用程序中使用屏幕像素（无论平台如何）。

我应该如何设置边框，因此每次看起来都一样，而且细线很细

整个问题是，无论屏幕大小如何，它都应该看起来一样。 使用图像并将其作为边框图像应用可能会带来更多运气： http : //www.w3schools.com/cssref/css3_pr_border-image.asp

或者有些视网膜屏幕可能适用于Nexus 7分辨率： http ： //bradbirdsall.com/mobile-web-in-high-resolution

This is not a bug.

I tend to think of 1 CSS Pixel to being equivalent to 1 Dip in a Native Android App.

In the web you aren't expected to cater to screen pixels, same as you aren't expected to use screen pixels in native applications (regardless of the platform).

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

The whole point is that it should look the same regardless of screen size. You may have more luck using an image and applying it as a border image: http://www.w3schools.com/cssref/css3_pr_border-image.asp

Or there are some hacks which exist for retina screens that may work for the Nexus 7 resolution: http://bradbirdsall.com/mobile-web-in-high-resolution