移動端1px邊框問題

解決方案一

使用rem為單位斩祭。
使用js獲取dpr值動態(tài)計算視口縮放，設(shè)置viewport content屬性身笤。
計算得到縮放比后，應(yīng)該對應(yīng)給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
多邊框?qū)崿F(xiàn)，目前較為常見的解決方案
把需要使用到的邊框全部提前定義好僧鲁，使用時只需要寫對應(yīng)的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>