移动端H5页面常见bug解决方法
1.上下拉动滚动条时卡顿、慢
解决办法：添加样式
body {
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
}
2.长时间按住页面出现闪退
解决办法：添加办法
element {
-webkit-touch-callout: none;
}
3.顶部状态栏背景色
说明：
- 除非你先使用apple-mobile-web-app-capable指定全屏模式，否则这个meta标签不会起任何作用。
- 如果content设置为default，则状态栏正常显示。如果设置为black，则状态栏会有一个黑色的背景。如果设置为blank-translucent，则状态栏显示为黑色半透明。
- 如果设置为default或blank，则页面显示在状态栏的下方，即状态栏占据上方部分，页面占据下方部分，二者没有遮挡对方或被遮挡。
- 如果设置为blank-translucent，则页面会充满屏幕，其中页面顶部会被状态栏遮盖住（会覆盖页面20px高度，而iphone4和itouch4的Retina屏幕为40px）。
- 默认值是default。
4.移动端 HTML5 audio autoplay 失效问题
问题：这个不是 BUG，由于自动播放网页中的音频或视频，会给用户带来一些困扰或者不必要的流量消耗，所以苹果系统和安卓系统通常都会禁止自动播放和使用 JS 的触发播放，必须由用户来触发才可以播放
解决办法：先通过用户 touchstart 触碰，触发播放并暂停（音频开始加载，后面用 JS 再操作就没问题了）
document.addEventListener('touchstart', function () {
document.getElementsByTagName('audio')[0].play();
document.getElementsByTagName('audio')[0].pause();
});
5.ios端按钮和输入框自带圆角问题：
解决办法：添加样式
-webkit-appearance : none ; /* 解决ios上按钮的圆角问题 */ border-radius: 0; /* 解决ios上输入框圆角问题 */
6.vue遮罩层阻止默认滚动事件（适用于遮罩层本身没有滚动事件的，否则本身的滚动事件也会被阻止）
@touchmove.prevent
7.页面在ios上能正常上下滑动，而安卓上不行，pc端也不能滑动，但是通过鼠标滚动是可行的，这时候有可能是css文件中加入了touch-action:none导致的，这句代码作用是阻止页面滚动，将它去掉就好了。
8.ios上双击强制缩放问题：
解决办法：添加样式
*{touch-action: manipulation} // 该方法还能移除整个文档的触发延迟，对于IE10，需要使用-ms-touch-action
9.使用translate导致元素内字体模糊：
问题：translate中的参数为非整数。常见于translateX(百分比)、translateY(百分比), translate(百分比,百分比)。
解决办法：translate中参数百分比其实是相对于操作元素本身的宽或高的百分比，所以可以调整所要操作的元素的宽或高，已达到百分比后的值是整数
10.App嵌入h5页面（使用vue）
问题：App端需要在页面跳转时拦截到跳转路径，使用vue的路由跳转方法时，App端是拦截不到的，因为vue是单页面应用，根本不存在页面的跳转。
解决办法：使用window.location.href方法跳转（注：如果当前页面使用window.location.href跳转，且路径中带有查询参数，在跳转后的页面中仍然可以使用this.$route.query来获取查询参数）
11.防止手机中网页放大和缩小
解决办法：设置meta中的viewport
12.format-detection---启动或禁用自动识别页面中的电话号码
说明：默认情况下，设备会自动识别任何可能是电话号码的字符串。设置telephone=no可以禁用这项功能。
13.H5调用安卓或者ios的拨号功能
解决办法：在a标签的href中添加tel:
10010
14.禁止复制、选中文本
解决办法：添加样式
Element {
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
15.输入框吊起键盘，低版本安卓机，收回键盘时页面变形
解决办法：body加上height:100%
-----------------后续补充