移動端1px問題

2021-09-01 02:21:57 字數 829 閱讀 5347

在移動端頁面中設定邊框為1px時,在有的裝置中可能會發現邊框比1px要粗即1培訓1px!=1px

裝置畫素比dpr = 裝置畫素 / css畫素(某一方向上)

當dpr為2時1px實際為2px(iphone6) dpr為3時1px為3px(inphoex),所有看起來1px就會變粗

ios8下已經支援帶小數的px值,可以使用devicepixelratio對應的**查詢

.border 

@media screen and (-webkit-min-device-pixel-ratio: 2)

}@media screen and (-webkit-min-device-pixel-ratio: 3)

}

使用transform的scale來整體縮放,如果你想畫一條1px的線,就可以直接用

.line
dpr=2時 縮放0.5 drp=3時縮放0.333

或和偽元素結合使用

li.flag:after
**的flexible提出的解決方案

根據window.devicepixelratio(dpr)的值動態改變viewport的縮放

其思想為:

if (!dpr && !scale)  else if (devicepixelratio >= 2 && (!dpr || dpr >= 2)) else 

} else

scale = 1 / dpr;

}if (!metael) else

}

移動端1px問題

在高清屏下,移動端的1px 會很粗。那麼為什麼會產生這個問題呢?主要是跟乙個東西有關,dpr devicepixelratio 裝置畫素比,它是預設縮放為100 的情況下,裝置畫素和css畫素的比值。window.devicepixelratio 物理畫素 css畫素目前主流的螢幕dpr 2 iph...

移動端1px實現

新增css 1px邊框時,在手機上顯示為粗線,解決辦法就是利用偽類設定1px邊框,然後根據裝置畫素比進行y軸的縮放,使其表現為真正的1px.stylus的語法 1.定義乙個函式。找到要加1px的標籤,新增定位和偽類。border 1px color position relative after d...

移動端開發1px邊框問題

border 1px media only screen and webkit min device pixel ratio 2 優點 可以設定單條 多條錶框。缺點 更換顏色和樣式麻煩,某些裝置上會模糊。border 1px media only screen and webkit min devi...