解決border:1px在移動端顯示borde: 2px的問題

border: 1px ··· 問題描述

例如我們在電腦端開發移動端項目時，會給某個元素設置border-bottom: 1px ···樣式。這時在谷歌設備模擬器中border正如我們所設置的一樣，但是當項目在手機上展示時，會發現原本的border-bottom: 1px ···變成了border-bottom: 2px ···。

設備模擬器效果：
在電腦端調試並沒有什麼問題。

真機效果：
在手機上調試時，可以看出原本的border-bottom: 1px ···變成了border-bottom: 2px ···所展示的樣式，儘管區別不是很大，但還是有影響的。

解決這個問題的方法

使用僞類來代替border
通過after或者before配合content來添加僞元素。

body {
	margin: 0;padding: 0;
}
div {
	width: 100vw;
	height: 30px;
}
.old {
	border-bottom: 1px solid red;
}
.new {
	position: relative;
}
.new::after {
	content: "";
	width: 100%;
	height: 1px;
	display: block;
	background: red;
	position: absolute;
	bottom: 0;
	left: 0;
	transform: scaleY(.5); /* 重點, 縮小自身的一辦 */
}

<div class="old"></div>
<div class="new"></div>

真機效果：

第一條線是沒有進行縮放的，第二條線是縮放自身一半的。所以第二條線纔是移動端該有的樣子。