在iOS系统中禁用H5页面双击放大功能

旧爱百科

在iOS系统中禁用H5页面双击放大功能，需结合 ‌meta标签设置‌、‌JavaScript事件拦截‌ 及 ‌CSS属性控制‌ 三种方式以确保兼容性：

一、核心实现方案

‌meta 标签基础配置‌

在HTML的<head>中添加以下代码，限制视口缩放范围：

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

‌JavaScript 事件拦截‌

监听触摸事件，阻止快速点击及多指操作：

document.addEventListener('DOMContentLoaded', () => {
      // 拦截双指触摸
      document.addEventListener('touchstart', (e) => {
        if (e.touches.length > 1) e.preventDefault();
      }, { passive: false });

      // 拦截双击
      let lastTouchEnd = 0;
      document.addEventListener('touchend', (e) => {
        const now = Date.now();
        if (now - lastTouchEnd <= 300) e.preventDefault();
        lastTouchEnd = now;
      }, { passive: false });
    });