吃透移动端 H5 与 Hybrid｜实践踩坑12种问题汇总

最新推荐文章于 2024-08-11 18:27:59 发布

Kotlin进阶

最新推荐文章于 2024-08-11 18:27:59 发布

阅读量509

点赞数

分类专栏： Web前端文章标签：经验分享前端前端框架

本文链接：https://blog.csdn.net/m0_70658519/article/details/124690294

版权

本文详细总结了移动端H5和Hybrid开发中遇到的12种常见问题，包括页面滑动空白、放大缩小不确定性、click事件延迟与穿透、软键盘顶起页面未回落、iPhone X安全区域适配等，并提供了相应的解决方案，包括使用touchstart替换click、设置viewport-fit、利用fastclick库以及处理微信分享等。

摘要由CSDN通过智能技术生成

body {

overflow-y: hidden;

}

.wrapper {

overflow-y: auto;

}

两者结合使用更佳！

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

表现

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

产生原因

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

解决方案

1. 监听事件禁止滑动

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

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

显然我们需要控制的是 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，让需要滑动的地方滑动，不需要滑动的地方禁止滑动。