现代浏览器已忽略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，减少误触和放大需求
很多所谓“禁止缩放”的失败，其实源于字体太小、点击目标太窄、对比度不足——这些才是用户主动放大的真实原因。
