How to get precise borders and sizes in Android KitKat's Webview(Android Chrome) on Nexus 7?

Question

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?

Answer 1

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