移動端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);
}
|