由於不同的手機有不同的畫素密度導致的。如果移動顯示屏的解析度始終是普通螢幕的2倍，1px的邊框在devicepixelratio=2的移動顯示屏下會顯示成2px，所以在高畫質瓶下看著1px總是感覺變胖了
解決方法
一．在ios8+中當devicepixelratio=2的時候使用0.5px
p.scale-1px:after{
content: '';
position: absolute; bottom: 0;
background: #000;
width: 100%; height: 1px;
-webkit-transform: scaley(0.5);
transform: scaley(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
優點：所有場景都能滿足，支援圓角(偽元素和本體都需要加border-radius)
缺點：對於已經使用偽元素的元素(例如clearfix)，可能需要多層巢狀
三，viewport + rem 實現
這種相容方案相對比較完美，適合新的專案，老的專案修改成本過大。
在devicepixelratio = 2 時，輸出viewport：
在devicepixelratio = 3 時，輸出viewport：
優點：所有場景都能滿足，一套**，可以相容基本所有布局
缺點：老專案修改代價過大，只適用於新專案
四，使用box-shadow模擬邊框
利用css 對陰影處理的方式實現0.5px的效果
樣式設定：
.box-shadow-1px {
box-shadow: inset 0px -1px 1px -1px #c8c7cc;
優點：**量少，可以滿足所有場景
缺點：邊框有陰影，顏色變淺
移動端 1px 畫素問題以及解決辦法
在移動端web開發中，ui設計稿中設定邊框為1畫素，前端在開發過程中如果出現border 1px，測試會發現在某些機型上，1px會比較粗，即是較經典的 移動端1px畫素問題。要處理這個問題，必須先補充乙個知識點，就是裝置的 物理畫素 裝置畫素 邏輯畫素 css畫素 物理畫素 移動裝置出廠時，不同裝置...
移動端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...