1ピクセルボーダーソリューション

枠が太くなる原因

cssの1 pxは、携帯電話によって画素密度が異なるため、モバイルデバイスの1 pxに等しくない.Windowsオブジェクトにはデバイスのピクセル比に反応するdevicePixelRatioプロパティがあります.

ソリューション:

ソリューションの1つは、JavaScriptでブラウザが0.5 pxの枠線を処理できるかどうかを検出し、できればhtmlラベル要素にclassを追加することです.

if (window.devicePixelRatio && devicePixelRatio >= 2) {
    vartestElem = document.createElement('div'); 
    testElem.style.border = '.5px solid transparent';
    document.body.appendChild(testElem);
}
if (testElem.offsetHeight == 1) {
    document.querySelector('html').classList.add('hairlines');
}
document.body.removeChild(testElem);

//        ，       ，     $(document).ready(function() {})

メソッド参照-http://www.jianshu.com/p/7e63f5a32636
2画素の要素にクラス名を付ける.scale-1 px、コードは以下の通りです

.scale-1px {
    position: relative;
    border: none;
}

.scale-1px:after {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid;
    border-color: #ccc;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    width: 200%;
    height: 200%;
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
    -webkit-transform-origin: left top;
            transform-origin: left top; 
}