安卓设备1px边框较粗的问题解决

背景：设备分辨率dpr，安卓设备一般设备分辨率为2，相当于是2个像素为1px，在iphone5/6/7/8上设备分辨率为2，相当于2个像素为1px，在6p、7p、8p、x等手机上设备分辨率为3，相当于3个像素为1px；要想在设备锁看起来比较细，在二倍分辨率下就需要0.5px，在3倍分辨率下就需要0.33px，以此来构成1像素

flexable.js就是通过判断设备分辨率，控制meta标签进行相应的放缩，达到1px代表1像素的要求，但是由于安卓设备不支持0.5px，flexable.js对所有安卓设备不做缩放处理，1px代表的是2个像素，因此看来1px在安卓手机上看是很粗的

解决方案：
一、使用tranform放缩，根据after属性，绝对定位到元素上，将宽高放大2倍，然后用transform缩小0.5，达到将边框变细的效果

.light-line{
  border: none;
  box-sizing: border-box;
  position: relative;
  &:after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    border: 1Px solid rgba(240,50,47,0.5);
    box-sizing: border-box;
    width: 200%;
    height: 200%;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
  }
}

优点：边框四周边边框看起来都很细，单个按钮边框展示无影响
缺点：由于是放缩，在一个列表中会导致某些线条出不来；

二、用svg背景图片，画一条1像素的线条作为背景图片

.light-svg-line{
  height: 1Px;
  background: url("data:image/svg+xml;utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1px'><line x1='0' y1='0' x2='100%' y2='0' stroke='#000'></line></svg>");
  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDAlJyBoZWlnaHQ9JzFweCc+PGxpbmUgeDE9JzAnIHkxPScwJyB4Mj0nMTAwJScgeTI9JzAnIHN0cm9rZT0nIzAwMCc+PC9saW5lPjwvc3ZnPg==');
}

优点：作为只有1像素高度的图片，不管是在安卓还是ios都能展示得很细
缺点：作为背景图，适用于列表底边边框；如果四边需要边框，圆角是实现不了的

注： 火狐浏览器对svg的图形处理不了，因此需要将svg转化成2进制

三、box-shadow

.line-box-shdow{
  height: 1Px;
  background: none;
  box-shadow: 0 1px 0 #e1e1e1;
}

优点：看起来是比较细
缺点：在ios上看起来比较模糊

四、line-gradient，一半白色，一半黑色，让边距变小

.line-gradient{
  height: 1Px;
  background:linear-gradient(0deg, #fff, #000);
}

优点：基本能实现
缺点：线比较虚