Android设备上的双宽边框，CSS像素比率为1.5

Question

给定一个包含带1px边框的元素的简单页面 （下面的源代码），与iOS相比，它将在Android上呈现如下：

如您所见，Android边框的宽度不均匀，有时为1px，有时为2px宽。 至于我已经能够测试它，这只发生在CSS像素比率为1.5的设备上（包括Android模拟器），而不是像素比率为2（包括iOS）。 我相信这个问题是由亚像素抗锯齿和/或舍入问题引起的，但我老实说我不知道​​如何解决这个问题。

<!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>

Answer 1

对于低DPI设备，我发现了下一个解决方法：

 .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> 

对于恰好低dpi的设备，应该使用媒体查询来处理异常。 例如@media（最大分辨率：190dpi）或其他条件

它与边界1px看起来有点不同，但是如此接近并且没有随机宽度的错误