“度学金”1.0版本中，UI要求列表边框是0.5像素。在IOS手机上border设置成0.5px是可以的，但是在安卓手机上0.5px不显示。如果统一设置成1px，那在IOS手机上线条就会显得非常粗，如果设置成0.5px，那么在安卓手机不显示。
当时采用的方式是全局判断手机的userAgent，如果是ios手机，那么border设置成0.5px，否则，设置成1px。这样做其实还是没有实现安卓手机显示0.5px的效果。
一、先看当时采用的方式：
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;
}()
};
先说~符号的意思：按位取反（按位非）运算符，简单的理解就是改变运算数的符号并减去1，当然，这是只是简单的理解能转换成number类型的数据。
定义一个全局变量G，设置一个属性isIOS，值是一个自执行函数，通过判断手机的userAgent，返回值是true或者false。
2、然后在组件实例的data中，通过window.G.isIOS判断，如果是true，border为0.5px，反之。
这样做其实还是没有实现在所有手机上border为0.5px的效果。
二、CSS3实现0.5像素边框
1、首先将目标元素设置成相对定位。
.div{
position: relative;
width: 100%;
line-height: 40px;
}
2、给目标元素加一个伪元素(after或before)，设置成绝对定位
.div::after{
content: "";
position: absolute;
left: 0;
}
3、宽高设置成目标元素的两倍，边款设置成1px
width: 200%;
height: 200%;
border: 1px solid red;
4、缩小0.5倍
transform-origin: 0 0;
transform: scale(0.5,0.5);
5、设置box-sizing(最关键的)
box-sizing: border-box; //至关重要
这样安卓手机也是可以显示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;/* 也可以设置圆角 */
-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效果。
