如何禁用HTML页面上的捏合缩放功能？

针对你尝试过的方案失效的情况，以下是经过验证的组合方案，覆盖主流移动浏览器：

1. 修正Viewport Meta标签 #

部分现代浏览器（如iOS Safari）对user-scalable=no的解析有变化，需补充完整参数确保生效：

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
    <title>Wow</title>
</head>

• 新增minimum-scale=1.0避免用户缩小页面
• viewport-fit=cover适配iOS全屏场景，确保缩放限制生效

2. 替换Gesture事件为Touch事件监听 #

gesture系列事件兼容性较差，改用原生触摸事件检测缩放手势：

document.addEventListener('DOMContentLoaded', function() {
    let startDistance = 0;

    // 记录触摸开始时的两点距离
    document.addEventListener('touchstart', function(e) {
        if (e.touches.length === 2) {
            const xDiff = e.touches[0].clientX - e.touches[1].clientX;
            const yDiff = e.touches[0].clientY - e.touches[1].clientY;
            startDistance = Math.sqrt(xDiff * xDiff + yDiff * yDiff);
        }
    }, { passive: false });

    // 检测手势变化，阻止缩放行为
    document.addEventListener('touchmove', function(e) {
        if (e.touches.length === 2) {
            const xDiff = e.touches[0].clientX - e.touches[1].clientX;
            const yDiff = e.touches[0].clientY - e.touches[1].clientY;
            const currentDistance = Math.sqrt(xDiff * xDiff + yDiff * yDiff);
            
            // 当距离变化超过阈值时判定为缩放手势，阻止默认行为
            if (Math.abs(currentDistance - startDistance) > 8) {
                e.preventDefault();
            }
        }
    }, { passive: false });
});

• 必须设置{ passive: false }，否则无法调用e.preventDefault()
• 增加距离变化阈值，避免误判普通滑动手势

3. 调整CSS触摸行为规则 #

将touch-action应用到根元素，并补充滚动行为限制：

html, body {
    touch-action: none;
    overscroll-behavior: none;
    overflow: hidden;
}

• 覆盖html和body确保全局生效
• overscroll-behavior: none防止弹性滚动触发意外缩放

注意事项 #

• 部分浏览器允许用户强制开启缩放（如Chrome的"允许缩放网站"设置），这种情况下无法通过前端代码完全禁用
• 测试时需清除浏览器缓存，确保新的meta标签和代码生效

内容的提问来源于stack exchange，提问作者Bluebyte