导航
导航

移动端1px的解决方法

2017.03.13 hzzly

在上个项目中，移动端1px问题被困扰了好久，设置1px边框，实际显示2px。
以下是我在项目中的解决方法，才疏学浅，轻喷。

关于什么是移动端1像素边框问题，先上两张图，大家就明白了。

假的1px:
2px

真的1px:
1px

原来Retine屏的分辨率始终是普通屏幕的2倍，1px的边框在devicePixelRatio=2的retina屏下会显示成2px。

解决方案

transform: scaleY()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<div class="border-1px"></div>
 
<style type="text/scss">
.border-1px {
	position: relative;
	&:after{
		display: block;
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		border-top: 1px solid #000;
		content: '';
	}
}
 
@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5) {
	.border-1px{
		&::after{
			-webkit-transform: scaleY(0.7);
			transform: scaleY(0.7);
		}
	}
}
 
@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2) {
	.border-1px{
		&::after{
			-webkit-transform: scaleY(0.5);
			transform: scaleY(0.5);
		}
	}
}
</style>

到这已经成功解决了1px问题。

好了，吃饭去喽，溜了溜了。。。