PWA中设置CSS后仍可全局捏合缩放，如何修复并实现局部允许缩放？

第一步：修正viewport元标签 #

当前viewport标签未明确禁止全局缩放，这是页面仍能被缩放的核心原因，修改为：

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

• user-scalable=no 直接禁用浏览器默认的全局捏合缩放
• maximum-scale=1.0 和 minimum-scale=1.0 限制页面缩放范围，避免部分浏览器绕过user-scalable限制

第二步：调整全局与特定元素的touch-action配置 #

全局设置保持touch-action: pan-y，确保页面仅支持垂直滚动；给需要缩放的特定元素单独配置权限：

/* 全局禁止缩放，仅允许垂直滚动 */
* {
    touch-action: pan-y;
}

/* 给目标元素开启捏合缩放权限 */
.your-zoomable-element {
    touch-action: pinch-zoom pan-y; /* 允许捏合缩放+垂直滚动，可按需调整 */
}

• pinch-zoom 让浏览器识别该元素上的捏合手势并触发缩放，不会影响全局其他元素
• 若元素无需滚动，可仅设置touch-action: pinch-zoom

额外注意事项 #

• 部分安卓浏览器对touch-action支持存在差异，若仍有问题，可给目标元素添加gesturechange事件监听，通过transform: scale()手动实现缩放逻辑
• PWA需确保manifest文件中配置display: standalone或fullscreen，避免浏览器自带缩放控件干扰

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