1ピクセルボーダーソリューション
1282 ワード
枠が太くなる原因
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;
}