移动端web开发 1px边框问题

写一个border.scss 通用样式文件

/*border 1px
*/
@mixin border1px($borderStyle:solid, $borderColor:#EEEEEE, $borderRadius:0,$position:bottom) {
  position: relative;
  &:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    box-sizing: border-box;
    transform: scale(0.5);
    transform-origin: left top;
    border-radius: $borderRadius;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    pointer-events: none; // 解决内部元素无法点击问题
    @if ($position == top) {
      border-top: 1px $borderStyle $borderColor;
    }
    @if ($position == bottom) {
      border-bottom: 1px $borderStyle $borderColor;
    }
    @if ($position == left) {
      border-left: 1px $borderStyle $borderColor;
    }
    @if ($position == right) {
      border-right: 1px $borderStyle $borderColor;
    }
    @if ($position == all) {
      border: 1px $borderStyle $borderColor;
    }
  }
}

其他scss文件

@import './../../assets/styles/border';

// 底边框
.itemWrap {  
  float: left;  
  width: 100%;  
  height: 60px;  
  @include border1px(solid, #EEEEEE, 0, bottom);
  }
  
  // 顶边框
.itemWrap {  
  float: left;  
  width: 100%;  
  height: 60px;  
  @include border1px(solid, #EEEEEE, 0, top);
  }
  
  // 底部边框
.itemWrap {  
  float: left;  
  width: 100%;  
  height: 60px;  
  @include border1px(solid, #EEEEEE, 0, bottom);
  }
  
  // 左边框
.itemWrap {  
  float: left;  
  width: 100%;  
  height: 60px;  
  @include border1px(solid, #EEEEEE, 0, left);
  }
  
  // 右边框
.itemWrap {  
  float: left;  
  width: 100%;  
  height: 60px;  
  @include border1px(solid, #EEEEEE, 0, right);
  }
  
   // 全边框
.itemWrap {  
  float: left;  
  width: 100%;  
  height: 60px;  
  @include border1px(solid, #EEEEEE, 0, all);
  }
  
  // 全边框+ 圆角，单一边框时，第三个参数都为0
  .itemWrap {  
  float: left;  
  width: 100%;  
  height: 60px;  
  @include border1px(solid, #EEEEEE, 60px, all);
  }

表现: