产生原因
由于分辨率 DPI 的差异，高清手机屏上的 1px 实际上是由 2×2 个像素点来渲染，有的屏幕甚至用到了 3×3 个像素点
所以 border: 1px 在移动端会渲染为 2px 的边框
解决方案一 (不推荐)
使用高度为 1px 的图片代替
1
2
3
4
| .border-bottom-1px {
border-width: 0 0 1px 0;
border-image: url(1px.png) 0 0 2 0 stretch;
}
|
解决方案二
通过 js 获取到设备像素比，然后动态添加 标签 ，控制缩放
1
2
3
4
5
6
7
8
9
10
11
12
| (function() {
var scale = 1.0;
if (window.devicePixelRatio === 2) {
scale *= 0.5;
}
if (window.devicePixelRatio === 3) {
scale *= 0.333333;
}
var text = '',
maximum-scale=' + scale +', minimum-scale=' + scale + ', width=device-width, user-scalable=no" />';
document.write(text);
})();
|
解决方案三 (推荐)
使用伪类 :after 创建 1px 的边框，后通过 媒体查询（media） 适配不同的设备像素比
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
| .border-bottom-1px {
position: relative;
}
.border-bottom-1px::after {
content: ' ';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background-color: #222;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
.border-bottom::after {
-webkit-transform: scaleY(0.7);
transform: scaleY(0.7);
}
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
.border-bottom::after {
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
}
@media only screen and (-webkit-min-device-pixel-ratio: 3) {
.border-bottom::after {
-webkit-transform: scaleY(0.33);
transform: scaleY(0.33);
}
}
|