与1.5的CSS像素比Android设备的双边框宽度 | 5的CSS像素比Android设备的双边框宽度

本文介绍了与1.5的CSS像素比Android设备的双边框宽度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

给定一个（下文源）包含与1px的边框元素，它将呈现像这在Android相比到iOS：

正如你所看到的，Android的边界没有一个统一的宽度，有时是1px的，有时是2像素宽。至于我已经能够对其进行测试，这仅出现在1.5一个CSS的像素比例（包括Android模拟器）设备，但与2的像素比例（包括iOS）。我相信这个问题是由亚像素反锯齿和/或四舍五入的问题引起的，但老实说，我不知道我怎么会去修复这一点。

 ＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML和GT;
＆LT; HEAD＆GT;
    ＆LT;间的charset = UTF-8 /＆GT;
    ＆LT;标题＆GT;＆LT; /标题＆GT;
    ＆LT; META NAME =视口CONTENT =WIDTH =设备宽度，初始规模= 1.0，最大规模= 1.0，用户可扩展性=无＆GT;
    ＆LT;风格类型=文/ CSS＆GT;
           DIV {
                  宽度：100像素;
                  文本对齐：中心;
                  保证金左：50％;
                  边框：1px的固体品红;
          }
    ＆LT; /风格＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
        ＆LT; DIV＆GT;＆Foobar的LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;

解决方案

有关低DPI设备，我发现下一个解决方法：

 .wrapper {\r
  背景色：红色;\r
  填充：1px的;\r
  显示：inline-block的;\r
}\r
.inner_text {\r
  填充：5像素;\r
  背景色：#FFF;\r
  显示：inline-block的;\r
}

＆LT; DIV CLASS =包装＆GT;\r
  ＆LT;跨度类=inner_text＆GT;显示低DPI设备及LT完美的一个规模边界; / SPAN＆GT;\r
＆LT; / DIV＆GT;

整整低DPI设备应使用媒体查询例外。
例如@media（最大分辨率：190dpi）或其他条件

看起来从边境1px的稍有不同，但如此接近，而不是随机宽度窃听

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

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>

解决方案

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

这篇关于与1.5的CSS像素比Android设备的双边框宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！