1、禁用缩放
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
这一方案在 safari 上并不起作用,而且大大降低了移动端页面的可用性和可访问性。
2、使用指针事件 (IE10+)
a, button{
-ms-touch-action: manipulation; /* IE10 */
touch-action: manipulation; /* IE11+ */
}
允许移除特定元素或整个文档的触发延迟,而无需禁用缩放。但就目前而言,只有 Internet Explorer 实现了指针事件。
3、使用fastclick.js
FastClick 是 FT Labs 专门为解决移动端浏览器 300 毫秒点击延迟问题所开发的一个轻量级的库。FastClick 在检测到touchend事件的时候,会通过 DOM 自定义事件立即触发一个模拟click事件,并把浏览器在 300 毫秒之后真正触发的click事件阻止掉。
第一步:在页面中引入fastclick.js文件 https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js。
第二步:在js文件中添加以下代码
$(function() {
FastClick.attach(document.body);
});