移動端開發1px 問題的理解

2021-09-01 06:27:05 字數 1315 閱讀 7537

移動端開發頁面時,為了高度還原設計稿,開發中時常會遇到1px問題。下面是個人的一些理解。

什麼是1px問題?

先來看如下**,由於設定了1px的底邊框,瀏覽器在渲染該元素時,會為該元素設定1px底邊框,但在不同的螢幕上邊框顯示的效果不理想,有些螢幕上顯示的會比效果圖粗很多。

div

這是因為現代的高解析度屏大都是視網膜屏,不同的視網膜屏會用不同個數的物理畫素來表現css中的1px(例如dpr=2的視網膜屏就會用2個物理畫素的寬度來表現1px,dpr=3的則用3個物理畫素來表現),由於表現1px所用到的物理畫素個數不同,所以使得顯示的效果的不同。這就是1px問題。

總之,解決1px問題,就是解決如何在不同的視網膜屏上均以1個物理畫素的寬度來表現css中的1px

解決思路一:通過css的transform: scale 來實現。(略)

解決思路二:通過html設定header的mate來實現。

在入口html頁面中新增如下**,可以放在document的domccontentloaded事件中,或window的onload事件中:

// 1. 獲取header中的viewport

var viewport = document.

queryselector

("meta[name=viewport]");

// 2. 如果viewport 為空,則建立(略)

// 3. 根據裝置畫素設定viewport

if(window.devicepixelratio ==1)

if(window.devicepixelratio ==2)

if(window.devicepixelratio ==3)

通過上述js **即可實現讓瀏覽器用相同個數物理畫素的寬度來表示css畫素。

設定前後的效果圖對比

**只為了理解問題和解決思路,不代表實際應用,存在問題:

只考慮了dpr為3/2/1 的視網膜屏;

動態改變了initial-scale的值,會影響到其他元素的顯示。這就引發了另外的乙個問題:移動端的響應式布局

至此,結束。

移動端1px問題

在移動端頁面中設定邊框為1px時,在有的裝置中可能會發現邊框比1px要粗即1培訓1px 1px 裝置畫素比dpr 裝置畫素 css畫素 某一方向上 當dpr為2時1px實際為2px iphone6 dpr為3時1px為3px inphoex 所有看起來1px就會變粗 ios8下已經支援帶小數的px值...

移動端1px問題

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

移動端開發1px邊框問題

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