移动端 300 毫秒延迟的由来:
双击缩放, 顾名思义, 即用手指在屏幕上快速点击两次, iOS 自带的 Safari 浏览器会将网页缩放至原始比例. 那么这和 300 毫秒延迟有什么联系呢? 假定这么一个场景. 用户在 iOS Safari 里边点击了一个链接. 由于用户可以进行双击缩放或者双击滚动的操作, 当用户一次点击屏幕之后, 浏览器并不能立刻判断用户是确实要打开这个链接, 还是想要进行双击操作.
解决方案:
1, 设置 meta 标签禁止缩放
- @1 <meta name="viewport" content="user-scalable=no"/>
- <meta name="viewport" content="initial-scale=1, maximum-scale=1">/
表明这个页面是不可缩放的, 那双击缩放的功能就没有意义了, 此时浏览器可以禁用默认的双击缩放行为并且去掉 300ms 的点击延迟.
这个方案有一个缺点, 就是必须通过完全禁用缩放来达到去掉点击延迟的目的, 然而完全禁用缩放并不是我们的初衷, 我们只是想禁掉默认的双击缩放行为, 这样就不用等待 300ms 来判断当前操作是否是双击. 但是通常情况下, 我们还是希望页面能通过双指缩放来进行缩放操作, 比如放大一张图片, 放大一段很小的文字.
@2 <meta name="viewport" content="width=device-width"/>
一开始, 为了让桌面站点能在移动端浏览器正常显示, 移动端浏览器默认的视口宽度并不等于设备浏览器视窗宽度, 而是要比设备浏览器视窗宽度大, 通常是 980px. 我们可以通过以下标签来设置视口宽度为设备宽度. 因为双击缩放主要是用来改善桌面站点在移动端浏览体验的, 而随着响应式设计的普及, 很多站点都已经对移动端坐过适配和优化了, 这个时候就不需要双击缩放了, 如果能够识别出一个网站是响应式的网站, 那么移动端浏览器就可以自动禁掉默认的双击缩放行为并且去掉 300ms 的点击延迟. 如果设置了上述 meta 标签, 那浏览器就可以认为该网站已经对移动端做过了适配和优化, 就无需双击缩放操作了.
这个方案相比方案一的好处在于, 它没有完全禁用缩放, 而只是禁用了浏览器默认的双击缩放行为, 但用户仍然可以通过双指缩放操作来缩放页面.
2,FastClick
引入 < script src=""></script>
- $(function() {
- FastClick.attach(document.body);
}) 或者
- if ('addEventListener' in document) {
- document.addEventListener('DOMContentLoaded', function() {
- FastClick.attach(document.body);
- }, false);
- }
3, 可以使用 zepto.JS 的 tap 事件替代 click,Zepto 缺少合适的高度计算函数, 在项目开发中发现第三方插件和 Zepto 有冲突, 维护多套代码很不容易
4, 可以使用 touch.JS 的 tap 事件替代 click(此处的 touch.JS 并非 zepto 中的 touch.JS)
来源: https://www.cnblogs.com/zeishuai/p/10300568.html