5

给定一个包含 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>
4

1 回答 1

0

对于低 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 几乎没有什么不同，但非常接近并且没有随机宽度的问题

于 2015-08-18T09:26:30.603 回答