移動(dòng)端的像素比(devicePixelRatio)是指手機(jī)的物理像素和邏輯像素的比值,物理像素又稱(chēng)設(shè)備像素,一個(gè)物理像素是顯示器(手機(jī)屏幕)上最小的物理顯示單元。邏輯像素,也可以認(rèn)為是計(jì)算機(jī)坐標(biāo)系中的一個(gè)點(diǎn),這個(gè)點(diǎn)代表一個(gè)可以由程序使用的虛擬像素(css像素),然后相關(guān)系統(tǒng)轉(zhuǎn)換為物理像素。如果我們?cè)O(shè)置了邊框?yàn)?px,那么在像素比為2的手機(jī)上邊框就會(huì)顯示為2px。下面來(lái)說(shuō)一下如何處理
首先可以使用css3的媒體查詢(xún)
.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 }
}
除此之外,還可以使用偽類(lèi)進(jìn)行處理,缺點(diǎn)是代碼量多
@media screen and (-webkit-min-device-pixel-ratio:2){
.border::after{
border:1px solid deeppink;
transform-origin:0 0;
transform:scale(0.5)}
}
還可以通過(guò)meta標(biāo)簽設(shè)置視口
//像素比為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>
?
本文摘自 :https://blog.51cto.com/u