Why does a CSS border look different on Android?

Question

I have a box with a border.

border: 1px solid #000;

I am using the following viewport setup:

Answer 1

The meta tag that targeted pixel-density specifically has been depreciated and now both Android and iPhone seem to be just using the one metatag:

But, if you try to make a 1px border, it will be thicker and thinner on different sides depending on the mobile device's pixel density.

How some devices render '1px' with multiple pixels and it is not always pretty because they are using different pixel ratios (dpr) such as 1.5, 2 and 3. Sometimes, all 4 sides of a 1px border will not match.

This is some CSS to make 1px display properly on 2dpr iPhone by dividing 1px by half:

@media only screen and (-webkit-min-device-pixel-ratio: 2) {

div {

border-width: 0.5px;

}

And similar techniques are shown here: http://n12v.com/css-retina-and-physical-pixels/ https://developer.android.com/guide/webapps/targeting.html