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