解决移动设备上的300ms点击延迟

260 篇文章 13 订阅 ¥99.90 ¥299.90
本文探讨了移动设备上300ms点击延迟的原因,旨在解决这一问题,介绍了包括禁用缩放、设置viewport的device-width、使用指针事件、touchend事件处理以及利用FastClick和Tappy库等方法。同时也提醒开发者,是否需要解决这个问题取决于应用需求,并关注潜在的性能损耗和兼容性问题。
摘要由CSDN通过智能技术生成

这个 300ms 为什么会被设计出来呢? 原因在于单击后面还有个双击缩放动作,这个涉及到触摸设备的手势交互行为原生设计,在平台提供商比如苹果和谷歌,本意是通过 300ms 来区分两者之间的不同行为,单击一次等待 300ms 后没有再次单击那么就会触发缩放等双击行为。本意是好的,正常的逻辑实现,但是在现实的应用场景中,用户往往会觉得 web app 的事件触发不是那么灵敏,有那么一点延迟,那么我们如何避开这个特殊的300ms呢.

1、不要太纠结于此
是否能接受这 300ms 的时间延迟,往往取决于你的应用和目标受众,比如:如果是个内容为主,并且菜单较少的应用,那么用户在阅读上花费的事件远远大于在菜单上消耗的事件,这种情况下 300ms 是完全可以接受的,并且没有 300ms 延迟的体验并不会好很多。分析你的应用判断是否需要解决这个不是问题的问题,在做正确抉择。

2、禁用缩放 (chrome 和 firefox)
在 chrome 和 firefox 的移动版本中,如果禁用了页面缩放,那么着 300ms 的延迟就会自动消失,具体代码如下:

<meta name="viewport" content="width=device-width, user-scalable=no">

&
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

瑆箫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值