移动端H5 click 300ms 延迟

2025-07-19 90 阅读1分钟

背景

double tap to zoom

历史原因：2007年苹果推出首款iPhone时，为解决小屏幕浏览桌面端网页的体验问题，引入了双击缩放功能。用户双击页面后，浏览器会智能放大当前区域（如文章主体），提升可读性
延迟问题：为区分单击（跳转链接）和双击（缩放），浏览器需等待约300ms判断用户意图，导致移动端点击事件延迟，影响响应速度

最初解决方案: FastClick

FastClick库：通过模拟click事件绕过延迟

windown.addEventListener("load", function(){
    FastClick.attach(document.body)
}, false)

方案2: 禁用缩放

禁用缩放：设置<meta name="viewport" content="user-scalable=no">，但牺牲可访问性
适用于移动端和pc端分离的项目

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>title</title>
</head>