在具有高密度屏幕(devicePixelRatio为1.5)的
Android设备上,html元素的边框具有错误的边框宽度.
这里的两个框：jsbin sample,在桌面上正确显示
但是在android – 在chrome和stack浏览器 – 他们看起来像这样：
现在我明白为什么他们看起来像这样,但我找不到任何CSS解决方案 – 只有js.
解决方法
没有标准的解决方案,太糟糕了.您可以做出下一个技巧,以避免与1px宽度显示不一致的边框.
使边框的颜色稍微透明,即α<= 0.5.例如border-color：rgba(169,52,0.5)我在Android 4.4.2 Chrome& Yabrowser浏览器.工作正常！;
>使边框元素的宽度/高度为奇数,并移动元素位置.在这里你需要实验和使用JS,说如下：
$('div.elemWithBadBorders').each(function(){
var $el = $(this);
var width = $el.width();
if(width % 2 == 0){
$el.css('width',(width+1)+'px');
}
});
>如果Retina显示屏或其他雇用画面上显示,则禁用边框.你需要像css这样使用媒体查询：
@media (-webkit-min-device-pixel-ratio: 1.5) {
div.elemWithBadBorders {
border: none;
}
}
