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

Question

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

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

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

如您所见,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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

小智 0

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

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

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

它看起来与 border 1px 没什么不同，但非常接近，并且不会被随机宽度干扰

归档时间：	12 年，1 月前
查看次数：	555 次
最近记录：	6 年前