“度學(xué)金”1.0版本中，UI要求列表邊框是0.5像素捉腥。在IOS手機上border設(shè)置成0.5px是可以的，但是在安卓手機上0.5px不顯示。如果統(tǒng)一設(shè)置成1px此迅，那在IOS手機上線條就會顯得非常粗，如果設(shè)置成0.5px旧巾，那么在安卓手機不顯示耸序。
當(dāng)時采用的方式是全局判斷手機的userAgent，如果是ios手機鲁猩，那么border設(shè)置成0.5px坎怪，否則，設(shè)置成1px廓握。這樣做其實還是沒有實現(xiàn)安卓手機顯示0.5px的效果搅窿。
一嘁酿、先看當(dāng)時采用的方式：
1、全局做處理
window.G = {
isIOS : function() {
let IOSVersions = [8, 9, 10, 11, 12, 13, 14];
for (let i in IOSVersions) {
if (~navigator.userAgent.toLowerCase().indexOf('iphone os ' + IOSVersions[i])) {
return true;
}
}
return false;
}()
};
先說~符號的意思：按位取反（按位非）運算符男应，簡單的理解就是改變運算數(shù)的符號并減去1闹司，當(dāng)然，這是只是簡單的理解能轉(zhuǎn)換成number類型的數(shù)據(jù)沐飘。
定義一個全局變量G游桩，設(shè)置一個屬性isIOS，值是一個自執(zhí)行函數(shù)耐朴，通過判斷手機的userAgent借卧，返回值是true或者false。
2隔箍、然后在組件實例的data中谓娃，通過window.G.isIOS判斷，如果是true蜒滩，border為0.5px滨达，反之。
這樣做其實還是沒有實現(xiàn)在所有手機上border為0.5px的效果俯艰。
二捡遍、CSS3實現(xiàn)0.5像素邊框
1、首先將目標(biāo)元素設(shè)置成相對定位竹握。
.div{
position: relative;
width: 100%;
line-height: 40px;
}
2画株、給目標(biāo)元素加一個偽元素(after或before)，設(shè)置成絕對定位
.div::after{
content: "";
position: absolute;
left: 0;
}
3啦辐、寬高設(shè)置成目標(biāo)元素的兩倍谓传，邊款設(shè)置成1px
width: 200%;
height: 200%;
border: 1px solid red;
4、縮小0.5倍
transform-origin: 0 0;
transform: scale(0.5,0.5);
5芹关、設(shè)置box-sizing(最關(guān)鍵的)
box-sizing: border-box; //至關(guān)重要
這樣安卓手機也是可以顯示0.5px的续挟。
效果如下：
兼容各個主流瀏覽器的完整代碼
div {
position: relative;
width: 100%;
height: 40px;
}
div:after {
content: "";
position: absolute;
left: 0;
width: 200%;
height: 200%;
border: 1px solid #ff0000;
border-radius:5px;/* 也可以設(shè)置圓角 */
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scale(0.5, 0.5);
-ms-transform: scale(0.5, 0.5);
-o-transform: scale(0.5, 0.5);
transform: scale(0.5, 0.5);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
0.5px直線
方式一：
.box{
position:relative;
}
.box::after{
content: " ";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 1px;
background-color: #ccc;
/* 如果不用 background-color, 使用 border-top:1px solid #ccc; */
-webkit-transform: scaleY(.5);
transform:scaleY(.5);
}
方式二（微信團隊使用的weiui）
content: " ";
position: absolute;
left: 0;
top: 0;
height: 1px;
border-top: 1px solid #e5e5e5;
color: #e5e5e5;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
z-index: 2;
這種方式不管是什么手機都會顯示0.5px效果。
