H5常见问题及解决方案。

1：IOS滑动不流畅（上下滑动页面就产生卡顿，手指离开页面，页面会立即停止运动，没有滑动惯性）

  方案1：-webkit-overflow-scrolling:touch  //当手指从触摸屏移开，会保持一段时间的滚动.

方案2：设置外部的overflow为hidden，设置内容元素overflow为auto

          body{overflow-y:hidden}  .wrapper{overflow-y:auto}

2:IOS上拉边界 ，下拉出现空白

  表现：手指按住屏幕下拉，屏幕顶部会多出一块白色区域，手指按住屏幕上拉，底部多出一块白色区域。

  原因：再IOS中手指按住屏幕上下拖动，会触发touchmove事件，这个事件触发的对象是整个webview容器，容器自然会被拖动，剩下的部分会变成空白。

 方案1：移动端触摸事件有3个，分别定义为1：touchstart,touchmove ,touchend

document.body.addEventListener('touchmove', function(e) {
    if(e._isScroller) return;
    // 阻止默认事件
    e.preventDefault();
}, {
    passive: false
});
方案2：做成下拉刷新
3：页面放大活缩小不确定行为
  表现：双击或者双指张开手指页面元素，页面会放大或者缩小
   方案：HTML种有个meta 元标签，有个viewport属性控制页面的缩放，移动端常规写法

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    因此我们可以这样写 <meta name=viewport content="width=device-width, initial-scale=1.0, minimum-scale=1.0 maximum-scale=1.0, user-scalable=no">  

4：点击300ms延迟
   表现：IOS的safari为了实现双击缩放，再单击300ms之后，如果为进行第二次点击，则执行click单机操作，也就是为了判断用户行为是否为双击产生的，但是再APP
         中，无论食肉需要双击缩放这种行为，click单机都会产生300ms延迟。
   方案1：将click事件转成touchStart事件
         原生：el.addEventListener("touchstart",()=>{})
         vue : <button @touchstart="fn"></button>
   方案2：使用ui库
   方案3：fastClick
 5:软键盘将页面顶起来，收起没有回落
  表现：再Android手机中，点击input框，键盘弹出，将页面顶起来，导致页面样式错乱，移开焦点是，键盘收起，键盘区域空白，未回落
   产生原因：安卓的一些版本，输入弹框出来，会解压absolute和fixe定位的元素
  方案1：监听视口的高度。
   方案2：使用vw布局 加上calc
  6：IPhoneX系列安全区域适配
    表现：头部刘海两侧区域或者底部出现刘海遮挡文字。
    方案：设置viewport-fit为cover

     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes, viewport-fit=cover">

/* 适配 iPhone X 顶部填充*/
@supports (top: env(safe-area-inset-top)){
  body,
  .header{
      padding-top: constant(safe-area-inset-top, 40px);
      padding-top: env(safe-area-inset-top, 40px);
      padding-top: var(safe-area-inset-top, 40px);
  }
}
/* 判断iPhoneX 将 footer 的 padding-bottom 填充到最底部 */
@supports (bottom: env(safe-area-inset-bottom)){
    body,
    .footer{
        padding-bottom: constant(safe-area-inset-bottom, 20px);
        padding-bottom: env(safe-area-inset-bottom, 20px);
        padding-top: var(safe-area-inset-bottom, 20px);
    }
}