移動端1px邊框解決方案

2022-07-03 01:30:15 字數 597 閱讀 6333

在retina屏中，畫素比為2(iphone6/7/8)或3(iphone6plus/7plus/8plus)，1px的邊框看起來比真的1px更寬。

元素本身不定義邊框，偽元素定義1px邊框，並且根據根據畫素比值設定縮放比例，畫素比為3時設定為0.33，畫素比為2時設定0.5。

html:


css:


.border-1px 


.border-1px:after 


@media (-webkit-min-device-pixel-radio: 3), (min-device-pixel-radio: 3) 


}@media (-webkit-min-device-pixel-radio: 2), (min-device-pixel-radio: 2) 


}
當直接設定邊框1px時

html:


css:


.border-1px
兩者的最終效果如下(前者在iphone6plus/7plus/8plus模擬機上執行後者，在 iphone6/7/8模擬機上執行)：

移動端1px邊框的解決方案

因為裝置畫素比不同，邊框的大小在不同的裝置上也不同 border 1px color position relative after display block position absolute left 0 bottom 0 width 100 border bottom 1px solid c...

移動端 1px解決方案

var viewport document.queryselector meta name viewport var scale 1 window.devicepixelratio viewport.setattribute content width device width,initial sc...

移動端1px解決方案

lang en charset utf 8 name viewport content initial scale 1,maximum scale 1,minimum scale 1,user scalable no,width device width 移動端1px邊框問題title ul,li ...