HTML   发布时间:2022-04-14  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了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

大佬总结

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

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。