H5兼容性问题汇总

1. ios iphoneX系列底部被遮挡或跟随滚动条滑动（底部黑条）
   解决方案

<div className="EmployerContainer">
  <div className="indexContent">
    <Outlet></Outlet>
  </div>
  <div className="indexBar">
    <BottomTabBar
      defaultActive={defaultActive}
      onChange={handleTabChange}
      items={items}
    ></BottomTabBar>
    <div className="saveAreaClassSelf"></div>
  </div>
</div>


.EmployerContainer{
  height: 100vh;
  .indexContent{
    overflow-y: scroll;
    height: calc(100vh - 0.65rem - env(safe-area-inset-bottom));
    background-color: #F7FBFF;
  }
  .indexBar{
    line-height: 0.65rem;
    width: 100%;
    box-shadow: 0rem 0.01rem 0.04rem 0rem rgba(126,137,164,0.0800);
  }
  .saveAreaClassSelf{
    background-color: #fff;
    height: constant(safe-area-inset-bottom); /* 兼容 iOS<11.2 */
    height: env(safe-area-inset-bottom); /* 兼容iOS>= 11.2 */
  }
}

iphone13 效果

2. ios this.$router.go(0)刷新无效
   使用 window.location.reload()

3. 定位元素被输入法顶起
   input获取焦点时，让定位元素隐藏或改为静态定位，失去焦点时再恢复。

4. H5点击事件时会有闪频效果
   html 或者body添加 {-webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

5. 隐藏滚动条
   .div{
   overflow-x: scroll;
   word-break:keep-all;
   scrollbar-width: none;//兼容firebox
   -ms-overflow-style: none; //兼容ie
   }
   //兼容Chrome 和safari
   .div::-webkit-scrollbar{
   width: 0;
   height: 0;
   }

6. 键盘弹起、收起
   （1）、在ios中软键盘弹起时，仅会引起body的scrollTop值改变，可以通过输入框的获取焦点情况来做判断。因此监听的是输入框的得到焦点和失去焦点事件。
   （2)、而在android中存在主动收起键盘后，输入框并没有失焦；android在软键盘弹起或收起时，会改变window的高度，因此监听window的onresize事件；

⚠️ ios系统弹起软键盘时，固定定位失效，这是所有ios系统的一个bug，出现此问题时就利用上面监听输入框获取焦点和失去焦点的方法改变样式

7. 小米手机部分系统不支持font-weight:600设置的粗体字，改成font-weight:bold 即可