解决移动端1px问题

涉及点：after伪类、 border-sizing:border-box属性、 transform:scale(0.5)变形缩放属性；

• 单条边框

#border_1{
    background-color: #e4e4ea;
    position: relative;
}
#border_1:after{
    content: '';
    height: 1px;
    width: 100%;
    box-sizing: border-box;
    -webkit-box-sizing:border-box;
    background-color: red;
    position:absolute;
    top: 0;
    left: 0;
    transform: scale(1,0.5);
    transform-origin: left top;
} 

• 四边框

#border_4{ 
    background-color: #e4e4ea;
    border: none; 
    position: relative;
}
/*实现四边边线都是正常的0.5倍*/
#border_4:after{
    content: '';   
    height: 200%;
    width: 100%; 
    box-sizing: border-box;
    -webkit-box-sizing:border-box;
    transform: scale(1,0.5);
    transform-origin: left top;
    box-sizing: border-box;
    border: 1px solid #000;
    position: absolute;
    left: 0;
    top: 0; 
}

• 移动设备js辅助判断

if(window.devicePixelRatio && devicePixelRatio >= 2){
    //document.querySelector('div').className = 'border_1';
    document.querySelector('div').className = 'border_4';
}

• 效果图（红色是正常的1px,黑色是处理后的；）