移动端画1px线
2021-09-03 18:52:53

移动端的像素比（devicePixelRatio）是指手机的物理像素和逻辑像素的比值，物理像素又称设备像素，一个物理像素是显示器（手机屏幕）上最小的物理显示单元。逻辑像素，也可以认为是计算机坐标系中的一个点，这个点代表一个可以由程序使用的虚拟像素（css像素），然后相关系统转换为物理像素。如果我们设置了边框为1px，那么在像素比为2的手机上边框就会显示为2px。下面来说一下如何处理

首先可以使用css3的媒体查询

.border{1px solid deeppink}

//像素比为2
@media screen and (-webkit-min-device-pixel-ratio: 2) {
    .border { border: 0.5px solid deeppink }
}
//像素比为3
@media screen and (-webkit-min-device-pixel-ratio: 3) {
    .border { border: 0.33px solid deeppink }
}

除此之外，还可以使用伪类进行处理,缺点是代码量多

@media screen and (-webkit-min-device-pixel-ratio:2){
    .border::after{
    border:1px solid deeppink;
    transform-origin:0 0;
    transform:scale(0.5)}
    }

还可以通过meta标签设置视口

//像素比为2
<meta name="viewport" content="width=device-width,initial-scale=0.5,maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">
//像素比为3
<meta name="viewport" content="width=device-width,initial-scale=0.33,maximum-scale=0.33, minimum-scale=0.33, user-scalable=no">

最后还可以使用js判断

<style>
div{border:1px solid deeppink}
.border div{border:0.5px solid deeppink}
</style>
<script>
if(window.devicePixelRatio&&window.devicePixelRatio>1){
    var item=document.createElement('div');
    item.classList.add('border');
    document.body.appendChild(item)
    }
    if(item.offsetHeight==1){
        document.body.removeChild(item)
document.querySelector('html').classList.add('border')
    }

</script>