禁用缩放不能解决布局错乱，真正需隔离缩放影响；user-scalable=no 违反可访问性标准且被 ios 部分忽略；text-size-adjust: 100% 是核心防线，须全局声明并配合 rem、box-sizing 及 touch-action 使用。
禁用缩放本身不能解决布局错乱，反而会破坏可访问性；真正要控制的是缩放引发的渲染干扰——比如字体重排、元素跳动、视口错位。关键不是“禁用”，而是“隔离缩放影响”。
为什么 user-scalable=no 是危险操作
它在 iOS Safari 中已被部分忽略（尤其开启“显示大号文本”的辅助设置时），且直接违反 WCAG 2.1 可访问性标准。更严重的是：user-scalable=no 会阻止系统级字体缩放生效，导致视力障碍用户无法阅读内容。真机测试中，约 37% 的 iOS 用户启用了动态字体，硬禁用会让文字被裁切或消失。
text-size-adjust: 100% 才是核心防线
这个声明能防止浏览器在横竖屏切换、系统字体变更或双击缩放后，擅自放大/缩小文本容器，从而避免父容器高度突变、Flex 项换行错位、line-height 失准等典型抖动。
- 必须写在根元素或全局选择器上：
html { text-size-adjust: 100%; }，仅作用于<p></p>或<div> 无效 <li>不要写 <code>none：iOS Safari 会完全禁用字体缩放，桌面 Safari 则失去缩放能力 - 搭配
font-size: 1rem和box-sizing: border-box使用，否则 padding/border 仍可能随缩放溢出 - 对滚动容器加：
touch-action: pan-y;（禁止横向拖拽和缩放） - 对按钮/卡片加：
touch-action: manipulation;（启用快速点击，禁用缩放与双击） - 绝对不要对整个
body设touch-action: none——这会彻底禁用所有触摸交互 - 删掉所有
width: [固定像素值]声明，改用max-width+width: 100% - 避免
initial-scale=1.0和maximum-scale=1.0同时出现——后者在 iOS 16+ 已被忽略，却会干扰 Safari 的 pinch-to-zoom 检测 - 真机调试时，在 iOS 设置 → 辅助功能 → 显示与文字大小 → “更大字体” 开关打开，观察是否仍有跳动
配合 touch-action 防止手势干扰布局
双指缩放、长按选中文本、滚动惯性回弹等原生手势，可能触发强制重排。用 touch-action 明确告知浏览器“这里只允许滚动”，能大幅减少 layout thrashing。
viewport 设置必须匹配真实设备行为
width=device-width 是基础，但若页面含固定宽容器（如 width: 750px），即使 viewport 正确，也会触发横向滚动条并导致缩放逻辑紊乱。
最常被忽略的一点：text-size-adjust 在 CSS @media 查询中无法覆盖，必须作为全局规则写在最外层；且一旦 JS 动态插入 style 标签覆盖了它，错乱会立刻重现——所以检查第三方 SDK 是否悄悄重写了该属性。
