导航
导航

移动端1px的解决方法

在上个项目中,移动端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问题。

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