移动端1px细线解决方案总结

移动端1px变粗的原因

为什么移动端css里面写了1px, 实际看起来比1px粗. 其实原因很好理解:这2个’px’的含义是不一样的. 移动端html的header总会有一句

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

这句话定义了本页面的viewport的宽度为设备宽度,初始缩放值和最大缩放值都为1,并禁止了用户缩放. viewport通俗的讲是浏览器上可用来显示页面的区域, 这个区域是可能比屏幕大的.

根据这篇文章http://www.cnblogs.com/2050/p/3877280.html的分析, 手机存在一个能完美适配的理想viewport, 分辨率相差很大的手机的理想viewport的宽度可能是一样的, 这样做的目的是为了保证同样的css在不同屏幕下的显示效果是一致的, 上面的meta实际上是设置了ideal viewport的宽度.

以实际举例: iphone3和iphone4的屏幕宽度分别是320px,640px, 但是它们的ideal viewport的宽度都是320px, 设置了设备宽度后, 320px宽的元素都能100%的填充满屏幕宽. 不同手机的ideal viewport宽度是不一样的, 常见的有320px, 360px, 384px. iphone系列的这个值在6之前都是320px, 控制viewport的好处就在于一套css可以适配多个机型.

看懂的人应该已经明白 1px变粗的原因了, viewport的设置和屏幕物理分辨率是按比例而不是相同的. 移动端window对象有个devicePixelRatio属性, 它表示设备物理像素和css像素的比例, 在retina屏的iphone手机上, 这个值为2或3, css里写的1px长度映射到物理像素上就有2px或3px那么长.

1px解决方案

背景图渐变

@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
   }
}

背景图图片

.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;
}

rem解决方案

////根据屏幕大小及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缩放的方式

全能型写法
@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);
}

js判定支持0.5px

 用小数来写px值

IOS8下已经支持带小数的px值, media query对应devicePixelRatio有个查询值-webkit-min-device-pixel-ratio, css可以写成这样

.border { border: 1px solid #999 }
@media screen and (-webkit-min-device-pixel-ratio: 2) {
    .border { border: 0.5px solid #999 }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
    .border { border: 0.333333px solid #999 }
}