JAVA高级面试进阶训练营视频教程

admin · 发表于 2021-8-31 15:12:18

首先说一下300ms延迟的由来，2004年苹果为了实现在移动端双击缩放功能，给click事件增加了300ms延迟，如果300ms内发生第二次click则判定为双击缩放页面。这一成功的解决方案得到各大浏览器厂商争相效仿。但他的弊端很快显现，在移动端click事件会降低响应速度。谷歌率先推出禁止双击缩放的属性：

<meta name="viewport" content="user-scalable=no">
<meta name="viewport" content="initial-scale=1,maximum-scale=1">

禁止双击缩放，自然就没有了click延迟问题。

但是～但是～从IOS10开始，苹果开始允许用户强制双击缩放，上面的代码无效了……

这个问题困扰我很久，尝试过fastclick等库，效果依然不理想。最后发现touch-action属性，可以完美解决click的300ms延迟问题：

html {
  touch-action: manipulation;
}

加上meta标签可以做到更好的兼容性。

由于是设置了全局的html属性，打开Safari双击网页放下不能双击缩放了。也没有了300ms延迟。

参考文献：
https://thx.github.io/mobile/300ms-click-delay
https://developer.mozilla.org/zh-CN/docs/Web/CSS/touch-action

		自动登录	找回密码
密码			立即注册

JAVA高级面试进阶训练营视频教程	Java架构师系统进阶VIP课程	分布式高可用全栈开发微服务教程	Go语言视频零基础入门到精通	Java架构师3期(课件+源码)
Java开发全终端实战租房项目视频教程	SpringBoot2.X入门到高级使用教程	大数据培训第六期全套视频教程	深度学习（CNN RNN GAN）算法原理	Java亿级流量电商系统视频教程
互联网架构师视频教程	年薪50万Spark2.0从入门到精通	年薪50万！人工智能学习路线教程	年薪50万大数据入门到精通学习路线	年薪50万机器学习入门到精通教程
仿小米商城类app和小程序视频教程	深度学习数据分析基础到实战	最新黑马javaEE2.1就业课程	从 0到JVM实战高手教程	MySQL入门到精通教程

JAVA高级面试进阶训练营视频教程

Java架构师系统进阶VIP课程

彻底解决安卓和IOS浏览器click的300ms延迟问题