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

概述在具有高密度屏幕(devicePixelRatio为1.5)的 Android设备上,html元素的边框具有错误的边框宽度. 这里的两个框：jsbin sample,在桌面上正确显示 但是在android – 在chrome和stack浏览器 – 他们看起来像这样： 现在我明白为什么他们看起来像这样,但我找不到任何CSS解决方案 – 只有js. js解决方案是将元素的宽度和高度改变为奇数以及顶/左 在具有高密度屏幕(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

总结

以上是内存溢出为你收集整理的html – 错误边框的宽度在android浏览器全部内容，希望文章能够帮你解决html – 错误边框的宽度在android浏览器所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。