常见移动端兼容性问题

最新推荐文章于 2024-09-15 13:09:17 发布

weixin_30764771

最新推荐文章于 2024-09-15 13:09:17 发布

阅读量8.2k

点赞数 1

文章标签：移动开发

原文链接：http://www.cnblogs.com/xuLessReigns/p/11276484.html

版权

本文列举了移动端开发中遇到的一些典型兼容性问题，包括：点击事件300ms延迟、非可点击元素在iOS下点击失效、输入框被键盘遮挡、Android和iOS识别邮箱和电话、页面闪屏、CSS动画卡顿、以及固定定位问题。并提供了相应的解决办法，如使用fastclick库、设置CSS属性、meta标签配置等。

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

文章转自：https://zhuanlan.zhihu.com/p/28206065

1.IOS移动端click事件300ms的延迟相应

移动设备上的web网页是有300ms延迟的，往往会造成按钮点击延迟甚至是点击失效。

这是由于区分单机事件和双击屏幕缩放的历史原因造成的。

解决方式：

fastclick可以解决在手机上点击事件的300ms延迟
zepto的touch模块，tap事件也是为了解决在click的延迟问题
触摸屏的相应顺序为touchstart-->touchmove-->touchend-->click，也可以通过绑定ontouchstart事件，加快事件的响应，解决300ms的延迟问题

2.一些情况下对非可点击元素（label，span）监听click事件，iso下不会触发，css增加cursor：pointer就搞定了。

3.h5底部输入框被键盘遮挡问题

h5页面有个很蛋疼的问题就是，当输入框在最底部，点击软键盘后输入框会被遮挡。可采用如下方式解决

var oHeight = $(document).height