移动端为什么会有一像素问题？如何解决？

为什么会有一像素问题？

因为在移动端，由于屏幕分辨率的不同，现在分为一倍屏、二倍屏、三倍屏。在不同的分辨率上，有可能一像素被渲然成二个像素点或者三个像素点，所以在实际写代码的时候，我们写的 border: 1px solid #000; 可能实际被渲然为 2px/3px；

一像素问题的解决方案

1. 先使用伪类元素实现边框效果，然后通过媒体查询来操控transform: scale来适配不同分辨率

.border-bottom{
    position: relative;
}
.border-bottom::after {
    content: " ";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: #e4e4e4;
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
}

/* 2倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 2.0) {
    .border-bottom::after {
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
    }
}

/* 3倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 3.0) {
    .border-bottom::after {
        -webkit-transform: scaleY(0.33);
        transform: scaleY(0.33);
    }
}

2. 使用border-image来代替border

.border-image-1px {
    border-width: 1px 0px;
    -webkit-border-image: url("border.png") 2 0 stretch;
    border-image: url("border.png") 2 0 stretch;
}

3. 动态的设置meta标签的内容

设置meta标签

<meta
     name="viewport"
     id="WebViewport"
     content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
/> 

并在js中通过判断当前是一倍屏还是二倍屏、三倍屏，来动态的设置meta标签的内容

function rem() {
    document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
    let viewport = document.querySelector("#WebViewport")
    if (window.devicePixelRatio == 1) {
        viewport.setAttribute('content', 'width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no')
    } 
    if (window.devicePixelRatio == 2) {
        viewport.setAttribute('content', 'width=device-width, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no')
    } 
    if (window.devicePixelRatio == 3) {
        viewport.setAttribute('content', 'width=device-width, initial-scale=0.333333333, maximum-scale=0.333333333, minimum-scale=0.333333333, user-scalable=no')
    } 
}
rem()
window.onresize = rem;

4. border.css
   通过项目中引入border.css来解决