H5常见问题及解决方法（一）

1. iOS 滑动不流畅
2. iOS 上拉边界下拉出现白色空白
3. 页面放大或缩小不确定性行为
4. click 点击穿透与延迟
5. 软键盘弹出将页面顶起来、收起未回落问题
6. iPhone X 底部栏适配问题
7. 保存页面为图片和二维码问题和解决方案
8. 微信公众号 H5 分享问题
9. H5 调用 SDK 相关问题及解决方案
10. H5 调试相关方案与策略

 一. iOS 滑动不流畅
表现： 上下滑动页面会产生卡顿，手指离开页面，页面立即停止运动。整体表现就是滑动不流畅，没有滑动惯性。
1.在滚动容器上增加滚动 touch 方法
方案：
将-webkit-overflow-scrolling 值设置为 touch
.wrapper {
    -webkit-overflow-scrolling: touch;
}

设置滚动条隐藏： .container ::-webkit-scrollbar {display: none;}

2.设置 overflow
设置外部 overflow 为 hidden,设置内容元素 overflow 为 auto。内部元素超出 body 即产生滚动，超出的部分 body 隐藏。

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

二： iOS 上拉边界下拉出现白色空白

 
现象：手指按住屏幕下拉，屏幕顶部会多出一块白色区域。手指按住屏幕上拉，底部多出一块白色区域。
解决方案1：监听事件禁止滑动

移动端触摸事件有三个，分别定义为
1. touchstart ：手指放在一个DOM元素上。
2. touchmove ：手指拖曳一个DOM元素。
3. touchend ：手指从一个DOM元素上移开
 通过监听 touchmove，让需要滑动的地方滑动，不需要滑动的地方禁止滑动。
实现如下：

document.body.addEventListener('touchmove', function(e) {
    if(e._isScroller) return;
    // 阻止默认事件
    e.preventDefault();
}, {
    passive: false
});

三：页面放大或缩小不确定性行为

现象： 双击或者双指张开手指页面元素，页面会放大或缩小
HTML meta 元标签标准中有个 中 viewport 属性，用来控制页面的缩放，一般用于移动端。
移动端常规写法
<meta name="viewport" content="width=device-width, initial-scale=1.0">
因此我们可以设置 maximum-scale、minimum-scale 与 user-scalable=no 用来避免这个问题
<meta name=viewport  content="width=device-width, initial-scale=1.0, minimum-scale=1.0 maximum-scale=1.0, user-scalable=no">

四：click 点击事件延时与穿透

现象：
监听元素 click 事件，点击元素触发时间延迟约 300ms。
点击蒙层，蒙层消失后，下层元素点击触发。

为什么会产生 click 延时？
iOS 中的 safari，为了实现双击缩放操作，在单击 300ms 之后，如果未进行第二次点击，则执行 click 单击操作。也就是说来判断用户行为是否为双击产生的。但是，在 App 中，无论是否需要双击缩放这种行为，click 单击都会产生 300ms 延迟。
为什么会产生 click 点击穿透？
双层元素叠加时，在上层元素上绑定 touch 事件，下层元素绑定 click 事件。由于 click 发生在 touch 之后，点击上层元素，元素消失，下层元素会触发 click 事件，由此产生了点击穿透的效果。

解决方案一：使用 touchstart 替换 click
前面已经介绍了，移动设备不仅支持点击，还支持几个触摸事件。那么我们现在基本思路就是用 touch 事件代替click 事件。

将 click 替换成 touchstart 不仅解决了 click 事件都延时问题，还解决了穿透问题。因为穿透问题是在 touch 和 click 混用时产生。

**事件触发顺序: touchstart, touchmove, touchend, click。**

在原生中使用
el.addEventListener("touchstart", () => { console.log("ok"); }, false);
在 vue 中使用
<button @touchstart="handleTouchstart()">点击</button>

解决方案二：使用 fastclick 库
使用 npm/yarn 安装后使用
import FastClick from 'fastclick';
FastClick.attach(document.body, options);
同样，使用fastclick库后，click 延时和穿透问题都没了

五：软键盘将页面顶起来、收起未回落问题

现象：Android 手机中，点击 input 框时，键盘弹出，将页面顶起来，导致页面样式错乱。
移开焦点时，键盘收起，键盘区域空白，未回落。
原因：我们在app 布局中会有个固定的底部。安卓一些版本中，输入弹窗出来，会将解压 absolute 和 fixed 定位的元素。导致可视区域变小，布局错乱。
解决方案：
软键盘将页面顶起来的解决方案，主要是通过监听页面高度变化，强制恢复成弹出前的高度。
// 记录原有的视口高度
const originalHeight = document.body.clientHeight || document.documentElement.clientHeight;

window.onresize = function(){
  var resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;
  if(resizeHeight < originalHeight ){
    // 恢复内容区域高度
    // const container = document.getElementById("container")
    // 例如 container.style.height = originalHeight;
  }
}

键盘不能回落问题出现在 iOS 12+ 和 wechat 6.7.4+ 中，而在微信 H5 开发中是比较常见的 Bug。
兼容原理，1.判断版本类型 2.更改滚动的可视区域

const isWechat = window.navigator.userAgent.match(/MicroMessenger\/([\d\.]+)/i);
if (!isWechat) return;
const wechatVersion = wechatInfo[1];
const version = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);
 
 // 如果设备类型为iOS 12+ 和wechat 6.7.4+，恢复成原来的视口
if (+wechatVersion.replace(/\./g, '') >= 674 && +version[1] >= 12) {
  window.scrollTo(0, Math.max(document.body.clientHeight, document.documentElement.clientHeight));
}

window.scrollTo(x-coord, y-coord)，其中window.scrollTo(0, clientHeight)恢复成原来的视口