viewport meta 标签必须置于 中且首次 html 解析时即存在，动态插入无效；user-scalable=no 在 ios 10+ 失效，应优先用 touch-action: manipulation 和合理字体单位应对缩放问题。
viewport meta 标签必须写在
浏览器只在初始 HTML 解析阶段读取 <meta name="viewport">，后续用 JS 插入或修改完全无效。很多同学把 viewport 放在 末尾，或者等 Vue/React 渲染完再注入，结果缩放行为始终不生效。
- 必须放在
中，且越靠前越好（最好紧贴<title></title>后） - 不要用
document.write()或document.head.appendChild()动态添加 - 服务端渲染（SSR）时也要确保该标签在首屏 HTML 中已存在
user-scalable=no 在 iOS 10+ 上已基本失效，别依赖它禁用缩放
iOS Safari 从 10 开始无视 user-scalable=no，用户双指 pinch 依然能缩放——这是苹果的主动限制，为保障可访问性。强行禁用不仅无效，还会让 VoiceOver 等辅助工具报错。
- 真正可控的是初始缩放（
initial-scale）、最小/最大缩放（minimum-scale/maximum-scale） -
maximum-scale=1.0在部分 iOS 版本中会触发“页面无法缩放”警告，影响体验 - 如果目标是防止误触缩放，优先用 CSS
touch-action: manipulation配合合理字体大小
移动端适配别只写 width=device-width，漏掉 initial-scale=1 会导致 Safari 意外缩放
仅设置 width=device-width 而不设 initial-scale=1，iOS Safari 会按设备物理像素宽度计算布局，然后自动缩放到适合视口的尺寸——这会让文字变小、点击区域变窄，尤其在 iPhone SE 或高 DPR 屏上明显。
- 标准写法必须是：
<meta name="viewport" content="width=device-width, initial-scale=1"> - 加了
initial-scale=1才能让 CSS 像素与设备独立像素对齐 - 若需兼容老 Android（4.3 及以下），可补上
target-densitydpi=device-dpi，但现代项目基本不用
Chrome DevTools 模拟缩放 ≠ 真实设备行为，真机测试前别信预览效果
DevTools 的 “Responsive” 模式只模拟视口尺寸和 UA，不模拟系统级缩放策略（如 iOS 的动态字体缩放、Android 的系统字号偏好）。比如用户在 iOS 设置里调大“更大字体”，你的页面可能文字溢出，但 DevTools 完全看不出。
立即学习“前端免费学习笔记（深入）”；
- 测试前务必在真机开启系统“显示与文字大小”调节，观察实际渲染
- 用
rem或em做字体单位比px更友好，但也要注意font-size: 16px这类硬编码会覆盖系统设置 - 检测是否启用系统放大：JS 中读
matchMedia('(min-resolution: 2dppx)').matches不可靠，更直接看window.visualViewport.scale变化
