如何让移动端出现横向滚动条_移动端1px问题应该如何解决？

╰半夏微凉° 2023-01-04 13:18 119阅读 0赞

### **前言** ###

![a92cc31b07252a36efa446a4c3e551a0.png][]

在移动端web开发中，UI设计稿中设置边框为1像素，前端在开发过程中如果出现border:1px，测试会发现在retina屏机型中，1px会比较粗，即是较经典的移动端1px像素问题。

![ff222cd5d60e59bac5681b8b5d49b8dc.png][] 本文默认你已经对视口、物理像素、逻辑像素、设备像素比、css像素等移动端基本概念已经了解。

### **产生原因** ###

*  设备像素比：dpr=window.devicePixelRatio，也就是设备的物理像素与逻辑像素的比值。
 *  在`retina`屏的手机上, `dpr`为`2`或`3`，`css`里写的`1px`宽度映射到物理像素上就有`2px`或`3px`宽度。
 *  例如：`iPhone6`的`dpr`为`2`，物理像素是`750`(x轴),它的逻辑像素为`375`。也就是说，1个逻辑像素，在`x`轴和`y`轴方向，需要2个物理像素来显示，即：dpr=2时，表示1个CSS像素由4个物理像素点组成，如下图所示：
    
    ![2a0d9a26329ab711b731b185d76ac1a5.png][]

### **解决方案** ###

#### **1. 0.5px 方案** ####

在`IOS8+`，苹果系列都已经支持`0.5px`了，可以借助媒体查询来处理。

/*这是css方式*/
    .border { border: 1px solid #999 }
    @media screen and (-webkit-min-device-pixel-ratio: 2) {
         
        .border { border: 0.5px solid #999 }
    }
    /*ios dpr=2和dpr=3情况下border相差无几，下面代码可以省略*/
    @media screen and (-webkit-min-device-pixel-ratio: 3) {
         
        .border { border: 0.333333px solid #999 }
    }

`IOS7`及以下和`Android`等其他系统里，`0.5px`将会被显示为`0px`。那么我们就需要想出办法解决，说实在一点就是找到`Hack`。

解决方案是通过`JavaScript`检测浏览器能否处理`0.5px`的边框，如果可以，给`html`标签元素添加个`class`。

if (window.devicePixelRatio && devicePixelRatio >= 2) {
         
      var testElem = document.createElement('div');
      testElem.style.border = '.5px solid transparent';
      document.body.appendChild(testElem);
    }
    if (testElem.offsetHeight == 1) {
         
      document.querySelector('html').classList.add('hairlines');
    }
      document.body.removeChild(testElem);
    }
    // 脚本应该放在body内，如果在里面运行，需要包装 $(document).ready(function() {})

然后，极细的边框样式就容易了：

div {
         
      border: 1px solid #bbb;
    }
    .hairlines div {
         
      border-width: 0.5px;  
    }

优点：简单，不需要过多代码。  
缺点：无法兼容安卓设备、 `iOS 7`及以下设备。

#### **2. 伪类+transform** ####

原理：把原先元素的`border`去掉，然后利用`:before`或者`:after`重做`border`，并 `transform`的`scale`缩小一半，原先的元素相对定位，新做的`border`绝对定位。

/*手机端实现真正的一像素边框*/
    .border-1px, .border-bottom-1px, .border-top-1px, .border-left-1px, .border-right-1px {
         
        position: relative;
    }
    
    /*线条颜色 黑色*/
    .border-1px::after, .border-bottom-1px::after, .border-top-1px::after, .border-left-1px::after, .border-right-1px::after {
         
        background-color: #000;
    }
    
    /*底边边框一像素*/
    .border-bottom-1px::after {
         
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 1px;
        transform-origin: 0 0;
    }
    
    /*上边边框一像素*/
    .border-top-1px::after {
         
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 1px;
        transform-origin: 0 0;
    }
    
    /*左边边框一像素*/
    .border-left-1px::after {
         
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 1px;
        height: 100%;
        transform-origin: 0 0;
    }
    
    /*右边边框1像素*/
    .border-right-1px::after {
         
        content: "";
        box-sizing: border-box;
        position: absolute;
        right: 0;
        top: 0;
        width: 1px;
        height: 100%;
        transform-origin: 0 0;
    }
    
    /*边框一像素*/
    .border-1px::after {
         
        content: "";
        box-sizing: border-box;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        border: 1px solid gray;
    }
    
    
    /*设备像素比*/
    /*显示屏最小dpr为2*/
    @media (-webkit-min-device-pixel-ratio: 2) {
         
        .border-bottom-1px::after, .border-top-1px::after {
         
            transform: scaleY(0.5);
        }
    
        .border-left-1px::after, .border-right-1px::after {
         
            transform: scaleX(0.5);
        }
    
        .border-1px::after {
         
            width: 200%;
            height: 200%;
            transform: scale(0.5);
            transform-origin: 0 0;
        }
    }
    
    /*设备像素比*/
    @media (-webkit-min-device-pixel-ratio: 3)  {
         
        .border-bottom-1px::after, .border-top-1px::after {
         
            transform: scaleY(0.333);
        }
    
        .border-left-1px::after, .border-right-1px::after {
         
            transform: scaleX(0.333);
        }
    
        .border-1px::after {
         
            width: 300%;
            height: 300%;
            transform: scale(0.333);
            transform-origin: 0 0;
        }
    }
    /*需要注意是没有:before, :after伪元素的*/

优点：所有场景都能满足，支持圆角(伪类和本体类都需要加border-radius)。  
缺点：代码量也很大，对于已经使用伪类的元素(例如clearfix)，可能需要多层嵌套。

#### **3. viewport + rem** ####

同时通过设置对应`viewport`的`rem`基准值，这种方式就可以像以前一样轻松愉快的写1px了。  
在`devicePixelRatio=2` 时，设置`meta`：

在`devicePixelRatio=3` 时，设置`meta`：

实例验证：

html>
    <html lang="en">
    <head>
        <title>移动端1px问题title>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
        <meta name="viewport" id="WebViewport"content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
        <style>html {
         font-size: 11px;
            }body {
         padding: 1rem;
            }
            * {
         padding: 0;margin: 0;
            }.item {
         padding: 1rem;border-bottom: 1px solid gray;font-size: 1.2rem;
            }style>
        <script>var viewport = document.querySelector("meta[name=viewport]");var dpr = window.devicePixelRatio || 1;var scale = 1 / dpr;//下面是根据设备dpr设置viewport
            viewport.setAttribute("content", +"width=device-width," +"initial-scale=" +
                scale +", maximum-scale=" +
                scale +", minimum-scale=" +
                scale +", user-scalable=no"
            );var docEl = document.documentElement;var fontsize = 10 * (docEl.clientWidth / 320) + "px";
            docEl.style.fontSize = fontsize;script>
    head>
    <body>
        <div class="item">border-bottom: 1px solid gray;div>
        <div class="item">border-bottom: 1px solid gray;div>
    body>
    html>

优点：所有场景都能满足，一套代码，可以兼容基本所有布局。  
缺点：老项目修改代价过大，只适用于新项目。

#### **4. border-image** ####

首先准备一张符合你要求的`border-image`：

![d88694008e24e9c51ec90e03ca4906af.png][]

通常手机端的页面设计稿都是放大一倍的，如：为适应`iphone retina`，设计稿会设计成`750*1334`的分辨率，图片按照`2`倍大小切出来，在手机端看着就不会虚化，非常清晰。同样，在使用`border-image`时，将`border`设计为物理`1px`，如下：

样式设置：

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

上文是把`border`设置在边框的底部，所以使用的图片是`2px`高，上部的`1px`颜色为透明，下部的`1px`使用视觉规定的`border`的颜色。如果边框底部和顶部同时需要`border`，可以使用下面的`border-image`：

![29823caacba4f9c0712bebb902203431.png][]

样式设置：

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

到目前为止，我们已经能在`iPhone`上展现`1px border`的效果了。但是我们发现这样的方法在非视网膜屏上会出现`border`显示不出来的现象，于是使用`Media Query`做了一些兼容，样式设置如下：

.border-image-1px {
         
        border-bottom: 1px solid #666;
    } 
    
    @media only screen and (-webkit-min-device-pixel-ratio: 2) {
         
        .border-image-1px {
         
            border-bottom: none;
            border-width: 0 0 1px 0;
            border-image: url(../img/linenew.png) 0 0 2 0 stretch;
        }
    }

优点：可以设置单条,多条边框，没有性能瓶颈的问题  
缺点：修改颜色麻烦, 需要替换图片；圆角需要特殊处理，并且边缘会模糊

#### **5. background-image** ####

`background-image`跟`border-image`的方法一样，你要先准备一张符合你要求的图片：

![d88694008e24e9c51ec90e03ca4906af.png][]

此例是准备将`border`设置在底部 样式设置：

.background-image-1px {
         
      background: url(../img/line.png) repeat-x left bottom;
      background-size: 100% 1px;
    }

优点：可以设置单条,多条边框，没有性能瓶颈的问题。  
缺点：修改颜色麻烦, 需要替换图片；圆角需要特殊处理，并且边缘会模糊。

#### **6. postcss-write-svg** ####

使用`border-image`每次都要去调整图片，总是需要成本的。基于上述的原因，我们可以借助于`PostCSS`的插件`postcss-write-svg`来帮助我们。如果你的项目中已经有使用`PostCSS`，那么只需要在项目中安装这个插件。然后在你的代码中使用：

@svg 1px-border {
         
        height: 2px;
        @rect {
         
          fill: var(--color, black);
          width: 100%;
          height: 50%;
        }
    }
    .example {
         
        border: 1px solid transparent;
        border-image: svg(1px-border param(--color #00b1ff)) 2 2 stretch;
     }

这样`PostCSS`会自动帮你把`CSS`编译出来：

.example {
         
        border: 1px solid transparent;
        border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='2px'%3E%3Crect fill='%2300b1ff' width='100%25' height='50%25'/%3E%3C/svg%3E")
              2 2 stretch;
      }

这个方案简单易用，是我所需要的。目前测试下来，基本能达到我所需要的需求，在最新的适配方案中，我也采用了这个插件来处理`1px`边框的问题。

### **总结** ###

*  `0.5px`，相信浏览器肯定是会慢慢支持的，目前而言，如果能用的话，可以`hack`一下。
 *  对于老项目，建议采用`transform`\+伪类。
 *  新项目可以设置`viewport`的`scale`值，这个方法兼容性好。
 *  `postcss-write-svg`简单易用，仅适合直线，圆角建议用`transform`\+伪类实现。

![d56fe18451ce2e7cd0f5a25b5a94d06c.png][]

其他推荐

有这个！你还愁不会写正则吗？

看我如何把node接口耗时降低23%！

前端的你是时候跻身docker了！【简易入门】

高级前端工程师是怎样高效部署前端应用？

Webpack 4 如何帮你删除无效代码？Tree Shaking 终极优化指南

进阶高级前端工程师需要了解的数据结构和算法

【撩妹教程】如何教公司新来的女实习生小姐姐什么是闭包？

前端如何在繁忙的业务中提升自己 【收藏系列】JavaScript知识图谱-入门培训，进阶巩固知识体系 全链路日志如何实现？ 大厂的高性能小程序原来是这样弄的！感觉可能会改变未来几年的打包方式！应用秒开方案改进测试一下你离前端专家这个称号还有多远？

![77b9a0642917125dd2f22f979c6b5ca5.png][]

![acc03162494cb0f664de7c1227253634.png][]点在看的人特别帅/美 ![04e9c8b6f3ded945abe6755730ed5504.gif][]

[a92cc31b07252a36efa446a4c3e551a0.png]: https://img-blog.csdnimg.cn/img_convert/a92cc31b07252a36efa446a4c3e551a0.png
[ff222cd5d60e59bac5681b8b5d49b8dc.png]: https://img-blog.csdnimg.cn/img_convert/ff222cd5d60e59bac5681b8b5d49b8dc.png
[2a0d9a26329ab711b731b185d76ac1a5.png]: https://img-blog.csdnimg.cn/img_convert/2a0d9a26329ab711b731b185d76ac1a5.png
[d88694008e24e9c51ec90e03ca4906af.png]: https://img-blog.csdnimg.cn/img_convert/d88694008e24e9c51ec90e03ca4906af.png
[29823caacba4f9c0712bebb902203431.png]: https://img-blog.csdnimg.cn/img_convert/29823caacba4f9c0712bebb902203431.png
[d56fe18451ce2e7cd0f5a25b5a94d06c.png]: https://img-blog.csdnimg.cn/img_convert/d56fe18451ce2e7cd0f5a25b5a94d06c.png
[77b9a0642917125dd2f22f979c6b5ca5.png]: https://img-blog.csdnimg.cn/img_convert/77b9a0642917125dd2f22f979c6b5ca5.png
[acc03162494cb0f664de7c1227253634.png]: https://img-blog.csdnimg.cn/img_convert/acc03162494cb0f664de7c1227253634.png
[04e9c8b6f3ded945abe6755730ed5504.gif]: https://img-blog.csdnimg.cn/img_convert/04e9c8b6f3ded945abe6755730ed5504.gif