移動端畫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>

?