移動 web 1px 邊框解決方案

在移動端web頁面開發中，為了使css中使用的尺寸與設計稿一致，通常會採用rem單位配合 lib-flexible 來實現移動端的適配，在ios裝置上flexible.js會根據裝置的解析度動態的調整viewport的width和scale來達到目的。

但是，現在很多的安卓手機也是高解析度的螢幕，有些1px邊框的按鈕和列表會顯得特別粗，flexible.js只處理了ios的手機，所以安卓手機需要我們自己處理。

首先，可以通過window.devicepixelratio拿到裝置的畫素比，然後給html標籤加上的相應的樣式。

function
retina () 
var html = document.getelementsbytagname('html')[0];
classnames.foreach(function (classname) );
}複製**

這樣一來我們可以通過,html.pixel-ratio-2給不同解析度的螢幕加上特殊的樣式處理。

由於andorid不能設定0.5px畫素的邊框，所以需要通過偽元素來模擬邊框，先使偽元素的高度為1px，然後使用transform: scale(.5)縮小相應的大小即可。具體實現**如下：

.item 
html
.pixel-ratio-3
& }
}複製**

然後不同方向的邊框，只需要跳轉偽元素的位置和縮放位置即可。該實現方案來自framework7

除了當個方向的邊框外，還有一種全邊框的按鈕，如果不做處理會顯得特別粗，但是偽元素只有before和after顯然剛才的單邊的方案不能用，所以只能採用其他方案。

當然還是利用偽元素畫邊框然後通過縮小，達到邊框變細的目的。首先我們使用偽元素畫四條邊，在將寬高調整到200%,最後再縮小50%，由於邊框是1px不會因寬高的改變而改變，所以我們縮小時邊框也會跟著變細。

.block-line 
}html
.pixel-ratio-3
& }
}複製**

此解決方案來自frozen ui