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

【问题标题】：Double-width borders on Android devices with a CSS pixel ratio of 1.5Android 设备上的双宽度边框，CSS 像素比为 1.5
【发布时间】：2013-08-11 08:33:22
【问题描述】：

给定一个simple page（来源如下），其中包含一个边框为 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>

【问题讨论】：

我在安卓浏览器中也遇到了这个问题。有没有办法解决这个问题？

标签： android mobile pixel-ratio

【解决方案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 没有什么不同，但非常接近并且没有随机宽度的问题

【讨论】：