移动终端1px问题解决

因移动端高清屏出现，导致1px边框，实际由2两个物理像素显示出来，下面我们来看下实际效果

html:
         <div class="halfonepx"></div>
            <div style="position: relative;">
                <div class="onepx"></div>
            </div>
         <div class="twopx"></div>
css:
.halfonepx {
    width: 300px;
    margin: 30px;
    height: 300px;
    border: 0.5px solid #ddd;
}
.onepx {
    width: 300px;
    margin: 30px;
    height: 300px;
    border: 1px solid #ddd;
}
.twopx {
    width: 300px;
    margin: 30px;
    height: 300px;
    border: 2px solid #ddd;
}

展示效果：

1-1.png

解决方法：
1.通过transform:scale来完成

    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1px;
    border-top: 1px solid #D9D9D9;
    color: #D9D9D9;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);

1-2.png

2.通过rem + viewReport， 1rem = 100px

(function() {
    /* 设计稿是750,采用1：100的比例,font-size为100 * (docEl.clientWidth * dpr / 750) */
    var dpr, rem, scale;
    var docEl = document.documentElement;
    var fontEl = document.createElement('style');
    var metaEl = document.querySelector('meta[name="viewport"]');
    dpr = window.devicePixelRatio || 1;
    rem = 100 * (docEl.clientWidth * dpr / 750);
    scale = 1 / dpr;
    // 设置viewport，进行缩放，达到高清效果
    metaEl.setAttribute('content', 'width=' + dpr * docEl.clientWidth + ',initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no');
    // 设置data-dpr属性，留作的css hack之用，解决图片模糊问题和1px细线问题
    docEl.setAttribute('data-dpr', dpr);
    // 动态写入样式
    docEl.firstElementChild.appendChild(fontEl);
    fontEl.innerHTML = 'html{font-size:' + rem + 'px!important;}';
})()