移动端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);
          }
      }

  目录