移动端1px解决方案
移动端1px解决方案
设备像素比?
window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。
-webkit-min-device-pixel-ratio的常见值对照
-webkit-min-device-pixel-ratio为1.0
- 所有非Retina的Mac
- 所有非Retina的iOS设备
- Acer Iconia A500
- Samsung Galaxy Tab 10.1
- Samsung Galaxy S
-webkit-min-device-pixel-ratio为1.3
- Google Nexus 7
-webkit-min-device-pixel-ratio为1.5
- Google Nexus S
- Samsung Galaxy S II
- HTC Desire
- HTC Desire HD
- HTC Incredible S
- HTC Velocity
- HTC Sensation
-webkit-min-device-pixel-ratio为2.0
- iPhone 4
- iPhone 4S
- iPhone 5
- iPad (3rd generation)
- iPad 4
- 所有Retina displays 的MAC
- Google Galaxy Nexus
- Google Nexus 4
- Google Nexus 10
- Samsung Galaxy S III
- Samsung Galaxy Note II
- Sony Xperia S
- HTC One X
实现移动端1px边框有以下几种方式:
背景图渐变
背景图图片
js判定支持0.5px
rem解决方案
scale缩放的方式
背景图渐变
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
@media only screen and (-webkit-min-device-pixel-ratio:2),
only screen and (min-device-pixel-ratio:2) {
.good-content {
border: none;
background-image: -webkit-linear-gradient(90deg,#e000,#00 50%,transparent 50%);
background-image: -moz-linear-gradient(90deg,#000,#e000 50%,transparent 50%);
background-image: -o-linear-gradient(90deg,#000,#000 50%,transparent 50%);
background-image: linear-gradient(0,#000,#000 50%,transparent 50%);
background-size: 100% 1px;
background-repeat: no-repeat;
background-position: bottom
}
}
|
样例: 百度糯米
背景图图片
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
.border-dp-b {
-webkit-box-sizing: border-box;
box-sizing: border-box;
background-image: url(../img/repeat-x.png);
background-repeat: repeat-x;
background-position: 0 bottom;
background-size: auto 1px;
}
或
.border-img {
border-bottom: 1px solid;
-webkit-border-image: url(../img/border-v.png) 2 0 stretch;
border-image: url(../img/border-v.png) 2 0 stretch;
}
|
js判定支持0.5px
|
1
2
3
4
5
6
7
8
|
// 就是放到html根节点上的 ，ios8现在普及率高了，可以省略
if (/iP(hone|od|ad)/.test(navigator.userAgent)) {
var v =(navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/),
version = parseInt(v[1], 10);
if (version >= 8) {
document.documentElement.classList.add('hairlines')
}
};
|
rem解决方案
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
////根据屏幕大小及dpi调整缩放和大小
(function () {
var scale = 1.0;
var ratio = 1;
if (window.devicePixelRatio >= 2) {
scale *= 0.5;
ratio *= 2;
}
var text = '<meta name="viewport" content="initial-scale=' + scale + ', maximum-scale=' + scale + ',' + ' minimum-scale=' + scale + ', width=device-width,' + ' user-scalable=no" />
';
document.write(text);
document.documentElement.style.fontSize = 50 * ratio + "px";
})();
|
样例: 美团
scale缩放的方式(推荐此方式)
|
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
35
36
37
38
|
全能型写法
@media (-webkit-min-device-pixel-ratio: 2){
.border-bottom::after {
border-bottom-width: 1px;
}
.border:after {
content: ' ';
display: block;
position: absolute;
top: 0;
right: -100%;
bottom: -100%;
left: 0;
border: 0 solid #e1e1e1;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
pointer-events: none;
-webkit-transform: scale(.5);
transform: scale(.5);
width: 200%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
}
满足一般需求可以使用这个
@media (-webkit-min-device-pixel-ratio: 2)
.border:after {
height: 1px;
content: '';
width: 100%;
border-top: 1px solid #e1e1e1;
position: absolute;
bottom: -1px;
right: 0;
transform: scaleY(0.5);
-webkit-transform: scaleY(0.5);
}
|
