Double-width borders on Android devices with a CSS

2019-06-21 19:02发布

问题:

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

http://f.cl.ly/items/0h2Y0v0u1v1L120m0X0s/Untitled-2.png

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

Double-width borders on Android devices with a CSS

问题:

回答1:

收藏的人(0)

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮