移动端1px解决方案

移动端1px解决方案

 

设备像素比?

window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。

-webkit-min-device-pixel-ratio的常见值对照

-webkit-min-device-pixel-ratio为1.0

1. 所有非Retina的Mac
2. 所有非Retina的iOS设备
3. Acer Iconia A500 
4. Samsung Galaxy Tab 10.1
5. Samsung Galaxy S 

-webkit-min-device-pixel-ratio为1.3

1. Google Nexus 7

-webkit-min-device-pixel-ratio为1.5

1. Google Nexus S 
2. Samsung Galaxy S II 
3. HTC Desire
4. HTC Desire HD
5. HTC Incredible S 
6. HTC Velocity
7. HTC Sensation

-webkit-min-device-pixel-ratio为2.0

1. iPhone 4
2. iPhone 4S
3. iPhone 5
4. iPad (3rd generation)
5. iPad 4
6. 所有Retina displays 的MAC
7. Google Galaxy Nexus
8. Google Nexus 4
9. Google Nexus 10
10. Samsung Galaxy S III
11. Samsung Galaxy Note II
12. Sony Xperia S
13. 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); }

 

整体实现DEMO

http://10.14.57.140:8022/demo.html

转载于:https://www.cnblogs.com/fang51/p/5681528.html