365bet在线手机版-det365下载-best365手机官方

移动端300ms延迟由来及解决方案

移动端300ms延迟由来及解决方案

1、300ms延迟由来

300 毫秒延迟的主要原因是解决双击缩放(double tap to zoom)。双击缩放,顾名思义,即用手指在屏幕上快速点击两次,iOS 自带的 Safari 浏览器会将网页缩放至原始比例。 那么这和 300 毫秒延迟有什么联系呢? 假定这么一个场景。用户在 iOS Safari 里边点击了一个链接。由于用户可以进行双击缩放或者双击滚动的操作,当用户一次点击屏幕之后,浏览器并不能立刻判断用户是确实要打开这个链接,还是想要进行双击操作。因此,iOS Safari 就等待 300 毫秒,以判断用户是否再次点击了屏幕。 鉴于iPhone的成功,其他移动浏览器都复制了 iPhone Safari 浏览器的多数约定,包括双击缩放,几乎现在所有的移动端浏览器都有这个功能。、

2、解决方案

(1)添加viewpoint meta标签

(2)FastClick

https://github.com/ftlabs/fastclick

移动端事件触发顺序:在移动端,手指点击一个元素,会经过:touchstart --> touchmove -> touchend -->click。

fastclick.js的原理是:FastClick的实现原理是在检测到touchend事件的时候,会通过DOM自定义事件立即出发模拟一个click事件,并把浏览器在300ms之后真正的click事件阻止掉。

fastclick同样可以解决移动端点透现象。

点透现象:当A/B两个层上下z轴重叠,上层的A点击后消失或移开(这一点很重要),并且B元素本身有默认click事件(如a标签)或绑定了click事件。在这种情况下,点击A/B重叠的部分,就会出现点透的现象。点透现象的关键点:

A/B两个层上下z轴重叠。

上层的A点击后消失或移开。(这一点很重要)

B元素本身有默认click事件(如a标签) 或 B绑定了click事件。

在以上情况下,点击A/B重叠的部分,就会出现点透的现象。

示例代码:

移动端点透现象

解决方法:

移动端点透现象解决方法

说明:手机端浏览器基本已经没有300ms延时现象。

← 上一篇: 王者荣耀怎么退出来 王者荣耀如何正确退出游戏
下一篇: 3D肉蒲团(极乐宝鉴) →

相关推荐

32强沙场点兵

32强沙场点兵

2025-08-12 18:34:07 阅读: 5088
开了六指。还需要多久能生,太痛苦了

开了六指。还需要多久能生,太痛苦了

2025-07-14 19:42:55 阅读: 676
「屠龙之怒什么组合打金」屠龙之怒h5

「屠龙之怒什么组合打金」屠龙之怒h5

2025-07-22 07:05:26 阅读: 4942
立方厘米 到 立方米 (cm3 ⇄ m3)

立方厘米 到 立方米 (cm3 ⇄ m3)

2025-08-25 01:58:33 阅读: 8795
QQ青少年模式来了,家长可管控

QQ青少年模式来了,家长可管控

2025-07-27 01:34:56 阅读: 1612
dnf韩服开几级了

dnf韩服开几级了

2025-07-19 13:43:42 阅读: 5507
明了的意思

明了的意思

2025-08-27 18:48:13 阅读: 3694