移动端填坑

1、0.5px边框或者0.5px高度在安卓手机下不显示问题

.item-gap {
  position: relative;
  &:after {
    content: '';
    position: absolute;
    width: 200%;
    height: 1px;
    background: #eeeeee;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    transform: scale(0.5, 0.5);
    box-sizing: border-box;
    z-index: 1;
  }
}

2、display:inline-block不仅左右会有无法测量的间距，上下也会有，会影响文字
3、直接在图片外面加1px的浅颜色边框时，视觉上图片和边框之间会有一条白线

把一个带边框的透明层放到图片上，这样当时是一个有留白的图片时候是可以看到边框的，当是一个填充色图片时几乎就看不到边框了

// html
<div class="bug-logo">
    <div class="bug-logo-border"></div>
    <img class="buy-logo-img" :src="detailData.logoUrl" alt="">
</div>
// css
  .bug-logo {
    position: relative;
    width: 3.75rem;
    height: 3.75rem;
    border-radius: 0.1rem;
    overflow: hidden;
    .buy-logo-img {
      width: 100%;
      height: 100%;
      vertical-align: bottom;
    }
    .bug-logo-border {
      position: absolute;
      width: 100%;
      height: 100%;
      border: 1px solid rgba(0,0,0,0.10);
      border-radius: 0.1rem;
    }
  }

4、svg 当使用use方式引入时，不要在symbol标签上加width，height属性，因为此时如果再配合viewBox属性使用变会使这个属性在一些机器上如vivo失效

5、从input切换到一个从下面出现的浮层时，为了避免浮层被键盘顶上去，让浮层延时500毫秒后弹出

6、当页面上需要填写的信息过多是，下面的input呼出键盘时在安卓手机上会被键盘挡住并且不可滚动
解决方案：让这个页面可滚动，并且在input的click事件上延时500毫秒后让这个元素滚动到可视区域。
注意：只能在click事件上不能在focus事件上，因为用户点击键盘上的收起键盘并不是让input失焦，延时是为了等键盘弹出后再计算可视空间的大小
7、setInterval 在手机端应用收到后台时会停止计时

移动端填坑

推荐阅读