問題提出
這是乙個比較老的問題了，我第一次注意到的時候，是ui設計師來找我麻煩，emmm那時候我才初入前端職場，啥也不懂啊啊啊啊啊，情形是這樣的：
設計師拿著手機過來：這些邊框都粗了啊，我的設計稿上是1px的
我：？？？？我寫的是1px呀，不信你看。（說著拿出了css**
設計師：不對啊我眼睛看來這個邊框比我設計稿上粗很多，看起來好奇怪（emmm果然畫素眼
我：那我把它改成0.5px你看看（邊說邊改了**
設計師一看，點點頭，果然好很多。
後來發現同樣的**在某些安卓機上是有問題的，會導致0.5px的線看不見。
奇了怪了，顯然改成0.5px不能解決問題，但是確實1px邊框看上去比設計稿上要粗很多，原因何在？
1px邊框的表現
我直接使用css去定1px的邊框，
html:
css:
* ul, li
.hairlines
.hairlines li
得到的截圖如下：
看上去是比設計稿上要粗很多，設計稿上的應該是下面這樣的，大家可以比對一下：
解決方法一：偽類+transform
抱著解決問題的心理，雖然當時也沒有想清楚原因在哪，但是還是找到了相關的解決方法，其中一些方法中提到使用邊框border-image或者box-shadow，也可以模擬出想要的1px邊框效果，但是我個人覺得不通用，也不是常規解決方法。
最終選擇的是使用偽類+transform方法：原理是把原先元素的 border 去掉，然後利用 :before 或者 :after 重做 border ，並 transform 的 scale 縮小一半，原先的元素相對定位，新做的 border 絕對定位。
html同上
css如下：
* ul, li
.hairlines
.hairlines li
.hairlines li:after
這樣的話，畫出的線確實細很多，我在之後長達一年的時間裡面一般都是使用上面的方法去解決1px邊框的問題，但用著用著，我發現了幾個問題：
1.為什麼是scaley(0.5)？這個0.5是怎麼得出的？是不是所有機型都是要scale縮小到一半，換句話說是不是通用？
2.如果我要同時畫乙個容器的四個邊框怎麼辦？
3.支不支援圓角邊框？
後兩個問題改造一下上面的**，可以找到解決方法(為了方便檢視效果，我把平時寫法得出的效果和使用偽類得出的效果放一起，這樣更容易看出差別)：
www.cppcns.com
移動端1px邊框問題
粗線細線
這樣得出的效果圖如下：
下面的邊框明顯細很多，更貼近於設計稿。
那麼「1.為什麼是scaley(0.5)？這個0.5是怎麼得出的？是不是所有機型都是要scale縮小到一半，換句話說是不是通用？」這個問題該怎麼回答呢？
這就要回到問題的本質，為什麼我明明在css裡面寫了1px，但是仍然會出現「看起來比平時要粗很多的效果」？
查了資料看了下，原來css中設定的畫素並不是跟裝置的畫素點一一對應，www.cppcns.com這就是說，我在css中寫明1px，實際在手機上，看到的有可能並不是乙個畫素點佔據的寬度。
css的畫素是乙個抽象的相對的概念，在不同的裝置和環境中，所表示的物理畫素點是不一樣的，在比較老的裝置上，螢幕畫素密度比較低，這樣，確實乙個1px的畫素就是乙個物理畫素，但是技術飛速發展，現在的手機螢幕都是高解析度，在尺寸未變化的情況下，乙個螢幕上將充滿著更多的畫素點，這時乙個css的畫素(通常稱為邏輯畫素)將對應多個物理畫素點。
那到底乙個css的畫素寬度上對應多少個物理畫素點呢？
這就要提到devicepixelratio（裝置畫素比）
devicepixelratio = 裝置上物理畫素/獨立畫素，可以通過window.devicepixelratio獲取，這個畫素比恰好可以描述乙個css的畫素寬度上對應多少個物理畫素點，其實就是對應devicepixelratio個畫素點。
當viewport的屬性inwww.cppcns.comitial-scale為1時，頁面大小正常，但initial-scale為0.5時，頁面被縮小了1倍，devicepixelratio為2的裝置本來1個css畫素寬度佔2個物理畫素寬度，縮小後的1個css畫素寬度就只佔1個物理畫素，即實現了真正的1物理畫素。
解決方法二：rem + viewport
說到這裡，解決方法就很明了了：我們可以在執行的時候拿到裝置的devicepixelratio，動態改變viewport的initial-scale為 1/devicepixelratio，這樣就能保證1px的寬度就是真正的1物理畫素寬。其他適配使用rem（因為使用px的話都會被縮小）
**如下：
移動端1px邊框問題
得到的效果可以看下圖(手機上看更明顯一些)：
從上來看，回到之前的問題，"1.為什麼是scaley(0.5)？這個0.5是怎麼得出的？是不是所有機型都是要scale縮小到一半，換句話說是不是通用？"其實並不一定是0.5,在dpr為3的裝置上其實應該是0.3333……，也不通用，因為每個手機的dpr可能不一樣，但是方法一中的0.5一般因為至少比1px細，所以也差不多可以滿足設計師的要求了。
本文標題: 詳解移動端html5頁面中1px邊框的幾種解決方法
本文位址:
html5頁面自適應移動端
1 下面是我們經常用到的一些標籤，由於瀏覽器的差異，並不能百分百相容。2 百分比法，css中的百分比中的百指的是父元素，所有百分比都是這樣的。子元素寬度50 那麼父元素的寬度就是百，子元素的padding left 50 父元素的寬度是百，子元素的margin top 20 那麼父元素的高是百。所以...
HTML5頁面增強元素
5增強的頁面元素 1.details元素和summary元素 details語義 詳情 summary語義 概要，簡要 details元素可以實現類似顯示 隱藏的功能。summary用於顯示details的標題或者間接。注意 1.如果details下沒有summary元素，瀏覽器會自動新增，同時內容...
html5頁面載入改背景
關於我的頁面在載入的時候需要進行通過js進行判斷進行啟動背景的啟動控制，特此備註 if clientname yigui else 通過jquery 可以進行直接更改樣式 var thisw window.innerwidth document.documentelement.clientwidth...