17370845950

现代浏览器已忽略user-scalable=no，用户仍可缩放；应转向可控缩放：用min/max-scale提示、保障可访问性、优化字体与交互。

viewport meta 中 user-scalable=no 已被现代浏览器忽略

Chrome 90+、Safari 15.4+ 和 Firefox for Android 等主流浏览器已废弃对 user-scalable=no 的强制执行。即使你在 中写死，用户仍可通过双指捏合、三指滑动或系统辅助功能（如 iOS 的「缩放」设置）触发缩放。这不是 bug，而是 WCAG 可访问性要求的主动退让。

替代方案：用 CSS + JavaScript 组合拦截缩放行为

纯 HTML meta 不再可靠，需配合样式与事件控制。核心思路是：禁用默认手势响应 + 阻止缩放相关的 touch 事件传播 + 重置 transform 缩放。

• touch-action: manipulation 可减少双指缩放触发概率（但不完全阻止）
• 监听 touchstart 和 gesturestart，调用 event.preventDefault()
• 在 resize 或 orientationchange 后检查 window.visualViewport.scale，若偏离 1.0 则强制重置 document.documentElement.style.transform

document.addEventListener('gesturestart', e => e.preventDefault());
document.addEventListener('touchstart', e => {
  if (e.touches.length > 1) e.preventDefault();
});
// 防止视觉视口意外缩放
window.visualViewport?.addEventListener('resize', () => {
  if (window.visualViewport.scale !== 1) {
    document.documentElement.style.transform = 'scale(1)';
  }
});

iOS Safari 特别处理：viewport width 不能设为 device-width

iOS 16+ 在「显示缩放」开启时会无视 width=device-width，导致页面布局错乱。此时应改用固定宽度（如 width=375）并配合 maximum-scale=1.0（虽不强制，但仍有提示作用）：

注意：width=375 仅适用于明确适配 iPhone SE / 8 等小屏设备的场景；若需响应式，必须搭配 JS 动态计算 width 值，并监听 visualViewport.resize 更新。

真正起效的关键：放弃“完全禁止”，转向“可控缩放”

强制禁用缩放既不可靠，也违反可访问性规范（尤其对视力障碍用户）。更务实的做法是：

• 用 min-scale=1.0 和 max-scale=1.0 提示浏览器“建议保持原比例”
• 确保文字大小 ≥ 16px，行高 ≥ 1.5，对比度 ≥ 4.5:1，让用户无需缩放也能阅读
• 在关键操作区域（如表单输入框）添加 inputmode 和 autocomplete，减少误触和放大需求

很多所谓“禁止缩放”的失败，其实源于字体太小、点击目标太窄、对比度不足——这些才是用户主动放大的真实原因。