不能仅靠单一 viewport meta 标签禁止缩放，需组合 viewport 设置（width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no）、JS 拦截手势事件、以及表单控件 font-size≥16px 三重防御。
不能靠单一 <meta name="viewport"> 完全禁止缩放，尤其在 iOS 10+ 和表单聚焦场景下会失效；真正起效需要组合 viewport 控制 + CSS 防御 + 输入框字体干预。
viewport 设置必须包含这三项
只写 user-scalable=no 或 maximum-scale=1.0 在现代 iOS 上已不生效。必须同时声明：
-
initial-scale=1.0—— 确保初始渲染为 1:1 -
maximum-scale=1.0—— 显式封顶放大上限（iOS 10+ 仍需此参数） -
user-scalable=no—— 保留兼容旧安卓和部分 WebView
完整写法示例：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">。注意：不要加 minimum-scale，它会干扰 Safari 的地址栏自动隐藏逻辑。
iOS 双指/双击放大必须用 JS 拦截
仅靠 meta 标签无法阻止 iOS 10+ 的 gesturestart 和快速双击触发的 zoom。需在 中插入脚本：
立即学习“前端免费学习笔记（深入）”；
document.addEventListener('gesturestart', e => e.preventDefault());
document.addEventListener('touchstart', e => {
if (e.touches.length > 1) e.preventDefault();
});
document.addEventListener('touchend', e => {
const now = Date.now();
if (now - (window.lastTouchEnd || 0) < 300) e.preventDefault();
window.lastTouchEnd = now;
});这段代码拦截了手势起点、多点触控、以及连续快速 touchend（模拟双击），是目前 iOS 上最稳定有效的补充手段。
input 聚焦时页面放大？根源在字体大小
iOS Safari 对 <input>、<textarea></textarea> 有硬性规则：当元素内文本 font-size 时，会强制放大整个视口以提升可读性——这是系统级行为，viewport 和 JS 都拦不住。
- 全局修复方式：给所有表单控件设
font-size: 16px或更大，例如input, select, textarea { font-size: 16px; } - 若设计要求更小字号，可用
transform: scale(0.875)缩放内容本身，但保持原始 font-size ≥16px - 警惕第三方 HTML 片段（如 v-html 渲染的保险条款页）：它们自带未设 viewport 的
，会污染主页面缩放状态
别碰 zoom 和 transform: scale()
这两个属性看似“放大页面”，实则破坏布局流与可访问性：
-
zoom是非标准 CSS 属性，仅 IE/Edge 支持，Chrome/Firefox 完全忽略 -
transform: scale()会放大像素但不放大逻辑尺寸，导致点击区域偏移、媒体查询失效、滚动条错位 - 它们都无法响应视口变化，横竖屏切换后极易溢出或留白
真正该做的是用 rem + clamp() 控制字体弹性，比如 html { font-size: clamp(14px, 2.5vw, 18px); } —— 这才是适配高 DPI 和小屏的正解，而非强行锁死缩放。
