移動端1px變粗的原因

移動端html的header總會有一句
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
這句話定義了本頁面的viewport的寬度為設(shè)備寬度,初始縮放值和最大縮放值都為1,并禁止了用戶縮放. viewport通俗的講是瀏覽器上可用來顯示頁面的區(qū)域, 這個區(qū)域是可能比屏幕大的，viewport的設(shè)置和屏幕物理分辨率是按比例而不是相同的. 移動端window對象有個devicePixelRatio屬性, 它表示設(shè)備物理像素和css像素的比例, 在retina屏的iphone手機上, 這個值為2或3, css里寫的1px長度映射到物理像素上就有2px或3px那么長

解決方案

1、IOS8下已經(jīng)支持帶小數(shù)的px值, media query對應(yīng)devicePixelRatio有個查詢值-webkit-min-device-pixel-ratio, css可以寫成這樣

.border { border: 1px solid #999 } @media screen and (-webkit-min-device-pixel-ratio: 2) {.border { border: 0.5px solid #999 } } @media screen and (-webkit-min-device-pixel-ratio: 3) {.border { border: 0.333333px solid #999 } }

2、:after偽類方法

.border{position:relative;} .border:after{position: absolute;display: block;left: 0;bottom: 0;width: 100%;border-top: 1px solid rgba(7,17,27,0.1);content: ' ';} 創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的关于移动端 1px 像素问题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。