移动端1px边框问题

最新推荐文章于 2024-03-14 12:37:52 发布

原创最新推荐文章于 2024-03-14 12:37:52 发布 · 274 阅读

0 ·

CC 4.0 BY-SA版权

前端技术文档专栏收录该内容

9 篇文章

订阅专栏

本文提供了三种解决高清屏幕下1px边框显示不清晰的问题：一是使用rem单位结合JS动态调整；二是利用CSS3媒体查询和transform的scale属性；三是推荐的灵活方案，预定义多种边框样式并使用媒体查询调整。

解决方案一

使用rem为单位。
使用js获取dpr值动态计算视口缩放，设置viewport content属性。
计算得到缩放比后，应该对应给html的font-size 乘回缩放比。
边框使用px为单位，其余元素均使用rem单位，这样视口的缩放就只会影响到px单位。
一劳永逸的解决方案

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框1px</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maixmum-scale=1.0,user-scalable=no">
    <style>
        *{
            margin:0;
            padding:0;
        }
        html,body{
            width:100%;
            height:100%;
        }
    </style>
</head>
<body>
<div style="margin-top:1rem;height:5rem;width: 5rem;border: 1rem #f00 solid;">div</div>
<script>
    var dpr = window.devicePixelRatio || 1;
    var viep = document.querySelector('meta[name=viewport]');
    var scal = 1 / dpr;
    document.documentElement.style.fontSize = (document.documentElement.offsetWidth/10)*dpr+'px';
    viep.setAttribute('content','width=device-width,initial-scale='+scal+',maximum-scale='+scal+',user-scalable=no');
</script>
</body>
</html>

解决方案二

使用css3的媒体查询+transform的scale
单线解决方案

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框1px</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maixmum-scale=1.0,user-scalable=no">
    <style>
        *{
            margin:0;
            padding:0;
        }
        html,body{
            width:100%;
            height:100%;
        }
        #level{
            height: 1px;
            background: #f00;
        }
        @media only screen and (-webkit-device-pixel-ratio:2){
            #level{transform: scaleY(0.5);}
        }
        @media only screen and (-webkit-device-pixel-ratio:3){
            #level{transform: scaleY(0.333);}
        }
    </style>
</head>
<body>
    <div id="level"></div>
    <div style="height:100px;width: 100px;background: #ccc">div</div>
</body>
</html>

解决方案三（推荐方案非常灵活）

使用css3的媒体查询+transform的scale
多边框实现，目前较为常见的解决方案
把需要使用到的边框全部提前定义好，使用时只需要写对应的class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框1px</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maixmum-scale=1.0,user-scalable=no">
    <style>
        *{
            margin:0;
            padding:0;
        }
        html,body{
            width:100%;
            height:100%;
        }
        .box{
            width: 200px;
            height: 200px;
            background: #ccc;
            margin-left: 10px;
            margin-top: 10px;
            margin-bottom: 20px;
        }
        .border,.border-left,.border-right,.border-top,.border-bottom{
            position: relative;
            border:none;
        }
        .border:after{
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            border: 1px solid #f00;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            width: 100%;
            height: 100%;
        }
        .border-left:after{
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            border-left: 1px solid #f00;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            width: 100%;
            height: 100%;
        }
        .border-right:after{
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            border-right: 1px solid #f00;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            width: 100%;
            height: 100%;
        }
        .border-top:after{
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            border-top: 1px solid #f00;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            width: 100%;
            height: 100%;
        }
        .border-bottom:after{
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            border-bottom: 1px solid #f00;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            width: 100%;
            height: 100%;
        }
        @media only screen and (-webkit-device-pixel-ratio:2){
            .border:after{
                width: 200%;
                height: 200%;
                -webkit-transform: scale(0.5);
                transform: scale(0.5);
                -webkit-transform-origin: left top;
                transform-origin: left top;
            }
            .border-left:after{
                width: 200%;
                height: 200%;
                -webkit-transform: scale(0.5);
                transform: scale(0.5);
                -webkit-transform-origin: left top;
                transform-origin: left top;
            }
            .border-right:after{
                width: 200%;
                height: 200%;
                -webkit-transform: scale(0.5);
                transform: scale(0.5);
                -webkit-transform-origin: left top;
                transform-origin: left top;
            }
            .border-top:after{
                width: 200%;
                height: 200%;
                -webkit-transform: scale(0.5);
                transform: scale(0.5);
                -webkit-transform-origin: left top;
                transform-origin: left top;
            }
            .border-bottom:after{
                width: 200%;
                height: 200%;
                -webkit-transform: scale(0.5);
                transform: scale(0.5);
                -webkit-transform-origin: left top;
                transform-origin: left top;
            }
        }
        @media only screen and (-webkit-device-pixel-ratio:3){
            .border:after{
                width: 300%;
                height: 300%;
                -webkit-transform: scale(0.33333);
                transform: scale(0.33333);
                -webkit-transform-origin: left top;
                transform-origin: left top;
            }
            .border-left:after{
                width: 300%;
                height: 300%;
                -webkit-transform: scale(0.33333);
                transform: scale(0.33333);
                -webkit-transform-origin: left top;
                transform-origin: left top;
            }
            .border-right:after{
                width: 300%;
                height: 300%;
                -webkit-transform: scale(0.33333);
                transform: scale(0.33333);
                -webkit-transform-origin: left top;
                transform-origin: left top;
            }
            .border-top:after{
                width: 300%;
                height: 300%;
                -webkit-transform: scale(0.33333);
                transform: scale(0.33333);
                -webkit-transform-origin: left top;
                transform-origin: left top;
            }
            .border-bottom:after{
                width: 300%;
                height: 300%;
                -webkit-transform: scale(0.33333);
                transform: scale(0.33333);
                -webkit-transform-origin: left top;
                transform-origin: left top;
            }
        }
    </style>
</head>
<body>
    <div class="box border">div</div>
    <div class="box border-left">div</div>
    <div class="box border-right">div</div>
    <div class="box border-bottom">div</div>
    <!-- 单线 -->
    <div class="border-bottom" style="width:100%;height: 1px;"></div>
</body>
</html>