涉及點：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,黑色是處理後的；）