移动web 1px边框解决方案

最新推荐文章于 2022-01-22 00:10:55 发布

冰糖葫芦不加冰——

最新推荐文章于 2022-01-22 00:10:55 发布

阅读量451

点赞数

分类专栏：移动端兼容性文章标签：移动兼容性

移动端兼容性专栏收录该内容

1 篇文章 0 订阅

订阅专栏

JS处理
- 首先通过window.devicePixelRatio 拿到设备像素比，然后给html标签加上相应的样式；
- 然后通过添加的class分别设置；如 .pixel-ratio-2 .pixel-ratio-3

function retina () { // 高分辨率屏幕处理
    if (navigator.userAgent.toUpperCase().indexOf('IPHONE OS') !== -1) return; // IOS会缩放，不处理
    var classNames = [];
    var pixelRatio = window.devicePixelRatio || 1;
    classNames.push('pixel-ratio-' + Math.floor(pixelRatio));
    if (pixelRatio >= 2) {
        classNames.push('retina');
    }
    var html = document.getElementsByTagName('html')[0];
    classNames.forEach(function (className) {
        html.classList.add(className);
    });
}

单个边的1px方案
andorid不能设置0.5px像素的边框，所以需要通过伪元素来模拟边框，先使伪元素的高度为1px，然后使用transform: scale(1, .5)缩小相应的大小即可。

.item {
    position: relative;
    &:before{
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        height: 1px;
        width: 100%;
        background-color: $color;
        display: block;
        transform: scale(1, 0.5);
        -webkit-transform: scale(1, 0.5);
    }
}