移动端1px问题

为什么会出现？

• 首先了解两个像素：设备的 物理像素[设备像素] & 虚拟像素[CSS像素] & 逻辑像素[设备独立像素]
  • 物理像素：移动设备出厂时，不同设备的屏幕自带的不同屏幕像素，也称硬件像素；
  • 虚拟像素：即css中记录的像素
  • 逻辑像素：计算机坐标系统中的一个点，是由程序使用的虚拟像素(比如: CSS 像素)，这个点没有固定大小，越小越清晰，可由相关系统转换为物理像素
• devicePixelRatio（DPR）：反应css中的像素与设备的像素比
  • DPR为设备像素（物理像素）和设备独立像素（逻辑像素）的比例
  • DPR = 物理像素 / 独立设备像素
• 1px变粗的原因：
  • viewport的设置和屏幕物理分辨率是按比例而不是相同的. 移动端window对象有个devicePixelRatio属性,它表示设备物理像素和css像素的比例, 在retina屏的iphone手机上, 这个值为2或3,css里写的1px长度映射到物理像素上就有2px或3px那么长

如何解决（最佳解决方案）？

• transform: scale(0.5) 方案

  • 设置height: 1px，根据媒体查询结合transform缩放为相应尺寸

  div {
      height:1px;
      background:#000;
      -webkit-transform: scaleY(0.5);
      -webkit-transform-origin:0 0;
      overflow: hidden;
  }

  • 用::after和::befor,设置border-bottom：1px solid #000,然后在缩放-webkit-transform: scaleY(0.5);可以实现两根边线的需求

  div::after{
      content:'';
      width:100%;
      border-bottom:1px solid #000;
      transform: scaleY(0.5);
  }

  • 用::after设置border：1px solid #000; width:200%; height:200%,然后再缩放scaleY(0.5); 优点可以实现圆角，京东就是这么实现的，缺点是按钮添加active比较麻烦

  .div::after {
      content: '';
      width: 200%;
      height: 200%;
      position: absolute;
      top: 0;
      left: 0;
      border: 1px solid #bfbfbf;
      border-radius: 4px;
      -webkit-transform: scale(0.5,0.5);
      transform: scale(0.5,0.5);
      -webkit-transform-origin: top left;
  }

  • 媒体查询 + transfrom

  /* 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);
      }
  }