移动端开发必会出现的问题和解决方案_touchmove速度

对于一个开发了多个H5的前端工程师，在开发过程中难免会遇到一些兼容性等爬过坑的问题。现在我将这些问题一一汇总一下，并在后面给出坑产生的原理，和现阶段常规的填坑方案。由此来做一个阶段性的总结。

问题

下面列举了我遇到的一些常规问题，如有遇到其他问题请在评论区补充，之后我也会实践后加以补充，感谢！（经常更新该文）

移动端 H5 相关问题汇总：

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

移动端 H5 相关基础技术概览

原理与实践

之前两篇文章已经详细的论述了1px 问题与 响应式布局问题，并给出了原理和解决方案。

防止丢失，点赞收藏后跳转至快捷通道：1px通道与响应式布局通道

接下来呢，我们看看其他问题的原理和解决方案吧。

以下解决方案，均经过我测试成功，健康安全，请放下食用。由于篇幅原因，某些非核心解决方案的实现细节暂未谈论，需要自行研究。

iOS 滑动不流畅

表现

上下滑动页面会产生卡顿，手指离开页面，页面立即停止运动。整体表现就是滑动不流畅，没有滑动惯性。

产生原因

为什么 iOS 的 webview 中 滑动不流畅，它是如何定义的？

最终我在 safari 文档里面寻找到了答案（文档链接在参考资料项）。

原来在 iOS 5.0 以及之后的版本，滑动有定义有两个值 auto 和 touch，默认值为 auto。

-webkit-overflow-scrolling: touch; /* 当手指从触摸屏上移开，会保持一段时间的滚动 */

-webkit-overflow-scrolling: auto; /* 当手指从触摸屏上移开，滚动会立即停止 */
1
2
3

解决方案

1.在滚动容器上增加滚动 touch 方法

将-webkit-overflow-scrolling 值设置为 touch

.wrapper {
    -webkit-overflow-scrolling: touch;
}
1
2
3

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

可能会导致使用position:fixed; 固定定位的元素，随着页面一起滚动

2.设置 overflow

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

body {
    overflow-y: hidden;
}
.wrapper {
    overflow-y: auto;
}
1
2
3
4
5
6

两者结合使用更佳！

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

表现

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

产生原因

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

解决方案

1. 监听事件禁止滑动

移动端触摸事件有三个，分别定义为

1. touchstart ：手指放在一个DOM元素上。
2. touchmove ：手指拖曳一个DOM元素。
3. touchend ：手指从一个DOM元素上移开。
1
2
3

显然我们需要控制的是 touchmove 事件，由此我在 W3C 文档中找到了这样一段话

Note that the rate at which the user agent sends touchmove events is implementation-defined, and may depend on hardware capabilities and other implementation details.

If the preventDefault method is called on the first touchmove event of an active touch point, it should prevent any default action caused by any touchmove event associated with the same active touch point, such as scrolling.

touchmove 事件的速度是可以实现定义的，取决于硬件性能和其他实现细节

preventDefault 方法，阻止同一触点上所有默认行为，比如滚动。

由此我们找到解决方案，通过监听 touchmove，让需要滑动的地方滑动，不需要滑动的地方禁止滑动。

值得注意的是我们要过滤掉具有滚动容器的元素。