為什么移動端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;
    /* 防止點擊觸發(fā) */
    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;
}