与1.5的CSS像素比Android设备的双边框宽度 [英] Double-width borders on Android devices with a CSS pixel ratio of 1.5
问题描述
给定一个简单的页面（下文源）包含与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
} \r
＆LT; DIV CLASS =包装＆GT;\r
＆LT;跨度类=inner_text＆GT;显示低DPI设备及LT完美的一个规模边界; / SPAN＆GT;\r
＆LT; / DIV＆GT; \r
整整低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设备的双边框宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
