移动端border 1px 显示问题

<style>
        .box{
            position:relative;

            width:200px;
            height:200px;
            overflow:hidden;
            line-height:200px;
            text-align:center;
            float:left;
            margin:30px;
            background-color:#eee;
        }
        .rawBor{
            border:1px solid blue;
        }

        /*上，下边框*/
        .tBor:before,
        .bBor:after{
            position:absolute;
            content: "";
            height:1px;
            background:red;
            left:0;
            right:0;
        }
        .tBor:before{
            top:0;
        }
        .bBor:after{
            bottom:0;
        }

        /*左，右边框*/
        .lBor:before,
        .rBor:after{
            position:absolute;
            content: "";
            width:1px;
            background:red;
            top:0;
            bottom:0;
        }
        .lBor:before{
            left:0;
        }
        .rBor:after{
            right:0;
        }
        
        .trblBor:after{
            position:absolute;
            content:"";
            top:0;
            left:0;
            -webkit-box-sizing:border-box;
            -moz-box-sizing:border-box;
            box-sizing:border-box;
            width:100%;
            height:100%;
            border:1px solid blue;
            point-events:none;
        }
        
        /* 最后两个是为了检测Mobile ie9, 是因为Mobile IE9检测出的dpi为96dpi，与实际不符合 */
        @media (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx), (-ms-high-contrast:active), (-ms-high-contrast:none) {

            /*上，下边框*/
            .tBor:before,
            .bBor:after{
                -webkit-transform:scaleY(.5);
                -ms-transform:scaleY(.5);
                -o-transform:scaleY(.5);
                transform:scaleY(.5);
            }

            /*左，右边框*/
            .lBor:before,
            .rBor:after{
                -webkit-transform:scaleX(.5);
                -ms-transform:scaleX(.5);
                -o-transform:scaleX(.5);
                transform:scaleX(.5);
            }

            /*四边边框*/
            .trblBor:after{
                width:200%;
                height:200%;
                -webkit-transform:scale(.5);
                -ms-transform:scale(.5);
                -o-transform:scale(.5);
                transform:scale(.5);
            }

            /*上，左边框, 四边边框*/
            .tBor:before,
            .lBor:before,
            .trblBor:after{
                -webkit-transform-origin:0 0;
                -moz-transform-origin:0 0;
                -ms-transform-origin:0 0;
                -o-transform-origin:0 0;
                transform-origin:0 0;
            }

            /*下，右边框*/
            .bBor:after,
            .rBor:after{
                -webkit-transform-origin:100% 100%;
                -moz-transform-origin:100% 100%;
                -ms-transform-origin:100% 100%;
                -o-transform-origin:100% 100%;
                transform-origin:100% 100%;
            }
        }

        /* 解决1.5屏幕下某些边框不显式问题 */
        @media (-webkit-device-pixel-ratio: 1.5){
            /*上，下边框*/
            .tBor:before,
            .bBor:after{
                -webkit-transform:scaleY(.6666);
                -ms-transform:scaleY(.6666);
                -o-transform:scaleY(.6666);
                transform:scaleY(.6666);
            }

            /*左，右边框*/
            .lBor:before,
            .rBor:after{
                -webkit-transform:scaleX(.6666);
                -ms-transform:scaleX(.6666);
                -o-transform:scaleX(.6666);
                transform:scaleX(.6666);
            }

            /*四边框*/
            .trblBor:after{
                width:150%;
                height:150%;
                -webkit-transform:scale(.6666);
                -ms-transform:scale(.6666);
                -o-transform:scale(.6666);
                transform:scale(.6666);
            }
        }

        @media (-webkit-device-pixel-ratio: 3){
            /*上，下边框*/
            .tBor:before,
            .bBor:after{
                -webkit-transform:scaleY(.3333);
                -ms-transform:scaleY(.3333);
                -o-transform:scaleY(.3333);
                transform:scaleY(.3333);
            }

            /*左，右边框*/
            .lBor:before,
            .rBor:after{
                -webkit-transform:scaleX(.3333);
                -ms-transform:scaleX(.3333);
                -o-transform:scaleX(.3333);
                transform:scaleX(.3333);
            }
            /*四边框*/
            .trblBor:after{
                width:300%;
                height:300%;
                -webkit-transform:scale(.3333);
                -ms-transform:scale(.3333);
                -o-transform:scale(.3333);
                transform:scale(.3333);
            }
        }

    </style>

<div class="box tBor bBor">
        上， 下border
    </div>
    <div class="box lBor rBor">
        左，右border
    </div>

    <div class="box tBor rBor">
        上，右border 
    </div>

    <div class="box lBor bBor">
        左，下border
    </div>

    <div class="box trblBor">
        四角border,
        支持圆角
    </div>

    <div class="box rawBor">
        border:1px solid blue;
    </div>

此文为转载