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

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

什麼是1px問題？

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

div

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

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

解決思路二：通過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)

設定前後的效果圖對比

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

只考慮了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...