移动端下1px产生原因及解决方案

最新推荐文章于 2023-03-08 11:55:13 发布

protein1122

最新推荐文章于 2023-03-08 11:55:13 发布

阅读量585

点赞数

分类专栏：关于样式

本文链接：https://blog.csdn.net/u011973968/article/details/104001836

版权

关于样式专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、产生原因

DPR(devicePixelRatio) 设备像素比

window.devicePixelRatio=物理像素 /CSS像素

目前主流的屏幕DPR=2 （iPhone 8），或者3 （iPhone 8 Plus）。拿2倍屏来说，设备的物理像素要实现1像素，而DPR=2，所以css 像素只能是 0.5。一般设计稿是按照750设计的，它上面的1px是以750来参照的，而我们写css样式是以设备375为参照的，所以我们应该写成0.5px就好了！试过了就知道，iOS 8+系统支持，安卓系统不支持。

二、解决方案

1、专门针对ios的方案`**`

border:0.5px solid #E5E5E5

注：在Chrome上模拟iphone 8Plus，发现小于0.46px不生效（此方法安卓暂不支持）

2、使用边框图片`**`

border: 1px solid transparent;
border-image: url('./../../image/1.jpg') 2 repeat;

注：图片的颜色就是此后border的颜色（圆角会比较模糊）

3、使用box-shadow实现`***`

box-shadow: 0  -1px 1px -1px #e5e5e5,   //上边线
            1px  0  1px -1px #e5e5e5,   //右边线
            0  1px  1px -1px #e5e5e5,   //下边线
            -1px 0  1px -1px #e5e5e5;   //左边线

注：此方法实现简单，但毕竟是模拟的实现方法，仔细看谁都看不出是阴影不是边框

4、使用伪元素`****`

1条border

.border-bottom {
  position: relative;
  &::after{
    position: absolute;
    content: '';
    background-color: #e5e5e5;
    display: block;
    width: 100%;
    height: 1px; /*no*/
    transform: scale(1, 0.5);
    top: 0;
    left: 0;
  }
}

4条border

.border-all {
     position: relative;
       &:after{
           content:" ";
           position:absolute;
           top: 0;
           left: 0;
           width: 200%;
           height: 200%;
           transform: scale(0.5);
           transform-origin: left top;
           box-sizing: border-box;
           border: 1px solid #E5E5E5;
           border-radius: 4px;
      }
}

注：此方法全机型兼容，实现了真正的1px，但暂用了after伪元素，可能影响清除浮动

5、设置viewport的scale值`***`

利用viewport+rem+js实现

<html>
  <head>
      <title>1px question</title>
      <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
      <meta name="viewport" id="WebViewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">        
      <script>
          var viewport = document.querySelector("meta[name=viewport]");
          //下面是根据设备像素设置viewport
          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.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no');
          }
          var docEl = document.documentElement;
          var fontsize = 32* (docEl.clientWidth / 750) + 'px';
          docEl.style.fontSize = fontsize;
      </script>
  </head>
  <body></body>
</html>

注：此方法全机型兼容，但适用于新项目，老项目可能改动大