html – 错误边框的宽度在android浏览器

在具有高密度屏幕(devicePixelRatio为1.5)的 Android设备上,html元素的边框具有错误的边框宽度.

这里的两个框：jsbin sample,在桌面上正确显示

但是在android – 在chrome和stack浏览器 – 他们看起来像这样：

现在我明白为什么他们看起来像这样,但我找不到任何CSS解决方案 – 只有js.

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;
    }
 }

其中1.5是像素密度.在Retina显示屏上显示为2