移动端 1px线的 问题 解决办法

为什么移动端css里面写了1px, 实际看起来比1px粗.？

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
viewport的设置和屏幕物理分辨率是按比例而不是相同的. 移动端window对象有个devicePixelRatio属性, 它表示设备物理像素和css像素的比例, 在retina屏的iphone手机上, 这个值为2或3, css里写的1px长度映射到物理像素上就有2px或3px那么长.

解决方案

• 只有一边的线解决方案

.li{
    padding:0;
    height:2.4rem;
    border-bottom: none;
    position: relative;
}
.li::after{
    content: '';
    position: absolute;
    bottom:0;
    left:0;
    width:100%;
    height:1px;
    background: #e5e5e5;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

• 四个边都有的线解决方案

div {
    width: 200 px;
    height: 200 px;
    /*border: 1px solid red;*/
    margin: 50 px auto;
    position: relative;
}

div::after {
    content: "";
    pointer - events: none;
    /* 防止点击触发 */
    box - sizing: border - box;
    position: absolute;
    width: 200 % ;
    height: 200 % ;
    left: 0;
    top: 0;
    border - radius: 20 px;
    border: 1 px solid red; -
    webkit - transform: scale(0.5); -
    webkit - transform - origin: 0 0;
    transform: scale(0.5);
    transform - origin: 0 0;
}