一像素

产生原因
由于分辨率 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 = '<meta name="viewport" content="initial-scale=' + scale + ',
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;
}
/* 1.5倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
.border-bottom::after {
-webkit-transform: scaleY(0.7);
transform: scaleY(0.7);
}
}
/* 2倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
.border-bottom::after {
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
}
/* 3倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 3) {
.border-bottom::after {
-webkit-transform: scaleY(0.33);
transform: scaleY(0.33);
}
}
You forgot to set the qrcode for Alipay. Please set it in _config.yml.
You forgot to set the qrcode for Wechat. Please set it in _config.yml.
You forgot to set the business and currency_code for Paypal. Please set it in _config.yml.
You forgot to set the url Patreon. Please set it in _config.yml.
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×