移動端1px邊框解決方案

在retina屏中，像素比為2(iPhone6/7/8)或3(iPhone6Plus/7Plus/8Plus)，1px的邊框看起來比真的1px更寬。

• 使用偽類加transform的方式

元素本身不定義邊框，偽元素定義1px邊框，並且根據根據像素比值設置縮放比例，像素比為3時設置為0.33，像素比為2時設置0.5。

HTML:
<div class="border-1px"></div>

CSS:
.border-1px {
	position: relative;
}

.border-1px:after {
	position: absolute;
	content: "";
	top: -50%;
	bottom: -50%;
	left: -50%;
	right: -50%;
	-webkit-transform: scale(0.5);
	transform: scale(0.5);
	border-top: 1px solid #666;
}

@media (-webkit-min-device-pixel-radio: 3), (min-device-pixel-radio: 3) {
	border-1px::after {
		-webkit-transform: scaleY(0.33333333);
		transform: scaleY(0.33333333);
	}
}

@media (-webkit-min-device-pixel-radio: 2), (min-device-pixel-radio: 2) {
	border-1px::after {
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
	}
}

當直接設置邊框1px時

HTML:
<div class="border-1px"></div>

CSS:
.border-1px {
	border-top: 1px solid #666;
}

兩者的最終效果如下(前者在iPhone6Plus/7Plus/8Plus模擬機上運行后者，在 iPhone6/7/8模擬機上運行)：