在移動端web頁面開發中，為了使css中使用的尺寸與設計稿一致，通常會採用 rem 單位配合 lib-flexible 來實現移動端的適配，在IOS裝置上 flexible.js 會根據裝置的解析度動態的調整 viewport 的 width 和 scale 來達到目的。
但是，現在很多的安卓手機也是高解析度的螢幕，有些1px邊框的按鈕和列表會顯得特別粗，flexible.js 只處理了IOS的手機，所以安卓手機需要我們自己處理。
JS處理
首先，可以通過 window.devicePixelRatio 拿到裝置的畫素比，然後給 html 標籤加上的相應的樣式。
function retina () { // 高解析度螢幕處理
if (navigator.userAgent.toUpperCase().indexOf(`IPHONE OS`) !== -1) return; // IOS會縮放，不處理
var classNames = [];
var pixelRatio = window.devicePixelRatio || 1;
classNames.push(`pixel-ratio-` + Math.floor(pixelRatio));
if (pixelRatio >= 2) {
classNames.push(`retina`);
}
var html = document.getElementsByTagName(`html`)[0];
classNames.forEach(function (className) {
html.classList.add(className);
});
}複製程式碼這樣一來我們可以通過, html.pixel-ratio-2 給不同解析度的螢幕加上特殊的樣式處理。
單個邊的1px方案
由於andorid不能設定0.5px畫素的邊框，所以需要通過偽元素來模擬邊框，先使偽元素的高度為1px，然後使用transform: scale(.5)縮小相應的大小即可。具體實現程式碼如下：
.item {
position: relative;
&:before{
content: ``;
position: absolute;
left: 0;
top: 0;
bottom: auto;
right: auto;
width: 1px;
height: 100%;
background-color: @color;
display: block;
z-index: 1;
html.pixel-ratio-2 & {
.transform(scaleX(0.5));
}
html.pixel-ratio-3 & {
.transform(scaleX(0.33));
}
}
}複製程式碼然後不同方向的邊框，只需要跳轉偽元素的位置和縮放位置即可。該實現方案來自Framework7
邊框按鈕的1px方案
除了當個方向的邊框外，還有一種全邊框的按鈕，如果不做處理會顯得特別粗，但是偽元素只有 before 和 after 顯然剛才的單邊的方案不能用，所以只能採用其他方案。
當然還是利用偽元素畫邊框然後通過縮小，達到邊框變細的目的。首先我們使用偽元素畫四條邊，在將寬高調整到200%,最後再縮小50%，由於邊框是1px不會因寬高的改變而改變，所以我們縮小時邊框也會跟著變細。
.block-line {
position: relative;
border: 1px solid #000; // 正常情況下
html.pixel-ratio-2 & {
border-color: rgba(0, 0, 0, 0);
&:before {
content: "";
width: 200%;
height: 200%;
position: absolute;
top: 0;
left: 0;
border: 1px solid #000;
transform: scale(0.5);
transform-origin: 0 0;
padding: 1px;
box-sizing: border-box;
pointer-events: none;
}
}
html.pixel-ratio-3 & {
border-color: rgba(0, 0, 0, 0);
&:before {
content: "";
width: 300%;
height: 300%;
position: absolute;
top: 0;
left: 0;
border: 1px solid #000;
transform: scale(0.33);
transform-origin: 0 0;
padding: 1px;
box-sizing: border-box;
pointer-events: none;
}
}
}複製程式碼此解決方案來自Frozen UI