Double-width borders on Android devices with a CSS pixel ratio of 1.5

问题

Given a simple page (source below) that contains an element with a 1px border, it will render like this on Android compared to iOS:

As you can see, the Android border does not have a uniform width, sometimes being 1px and sometimes being 2px wide. As far as I've been able to test it, this only occurs on devices with a CSS pixel ratio of 1.5 (including the Android emulator), but not with a pixel ratio of 2 (including iOS). I believe that this problem is caused by subpixel-antialias and/or rounding issues, but I honestly have no idea how I'd go about fixing this.

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8 />
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <style type="text/css">
           div {
                  width: 100px;
                  text-align: center;
                  margin-left: 50%;
                  border: 1px solid magenta;
          }
    </style>
</head>
<body>
        <div>Foobar</div>
</body>
</html>

回答1:

For low DPI devices I found next workaround:

.wrapper {
  background-color: red;
  padding: 1px;
  display: inline-block;
}
.inner_text {
  padding: 5px;
  background-color: #fff;
  display: inline-block;
}

<div class="wrapper">
  <span class="inner_text">Showing perfect one-sized border on low DPI devices</span>
</div>

for exactly low dpi devices should use media query for exceptions. For example @media (max-resolution: 190dpi) or another condition

It looks little different from border 1px but so close and not bugged with random width

来源：https://stackoverflow.com/questions/18146195/double-width-borders-on-android-devices-with-a-css-pixel-ratio-of-1-5

标签

android

mobile

pixel-ratio