必须移除user-scalable=no、maximum-scale、minimum-scale等禁用缩放的viewport属性，仅保留width=device-width和initial-scale=1.0且置于最前，以保障弱视用户手动放大能力。
禁用缩放的 HTML 属性（如 user-scalable=no、maximum-scale=1.0）会直接破坏弱视用户的手动放大能力，必须全部移除；真正起效的只有 width=device-width 和 initial-scale=1.0 这两个组合，且必须写在 最前面。
viewport meta 标签里哪些属性绝对不能加
加了就等于关掉弱视用户的放大开关，不是“建议不加”，而是“加了即违规”：
-
user-scalable=no：iOS Safari 和多数安卓 WebView 会彻底禁用手势缩放和 Ctrl/Cmd + -
maximum-scale=1.0或maximum-scale=2.0：只要设了上限，系统级文本缩放超过该值时就会被截断或失效 -
minimum-scale：无实际用途，反而干扰辅助技术判断缩放上下限 - 拼写错误如
intial-scale：浏览器忽略整个content值，退回到默认 980px 视口，布局先闪一下再重排
为什么只留 width=device-width, initial-scale=1.0 就够了
这个组合是唯一被 iOS Safari、Chrome for Android、Edge WebView 等主流环境一致认可的最小可靠配置：
-
width=device-width告诉浏览器“按设备物理宽度渲染”，激活响应式逻辑（媒体查询、rem 计算、flex wrap） -
initial-scale=1.0防止 iOS Safari 自动缩放导致点击热区偏移（尤其在<input>聚焦时） - 不加其他参数，等于把缩放控制权完整交还给用户——他们可以用 Ctrl/Cmd +、双指捏合、系统文本缩放任意调整
- 注意：
initial-scale=1.0不影响后续缩放，它只管页面加载那一瞬间
HTML 属性误用导致缩放失效的真实场景
这些看似“无关”的 HTML 属性，在缩放后会暴露兼容性问题：
-
<img style="max-width:90%" style="max-width:90%">：硬编码尺寸会覆盖 CSS 的max-width: 100%，缩放后图片溢出容器或模糊 <div style="position: absolute; top: 20px; right: 15px;">：固定像素定位在 200% 缩放下会严重偏移，且无法被屏幕阅读器聚焦路径正确识别 <li> <code>：非标准属性，Firefox 不支持，缩放后 JS 获取的offsetTop、clientWidth全部失真-
<meta http-equiv="X-UA-Compatible" content="IE=edge">：仅 IE 有效，现代浏览器忽略，但若混在前面，可能延迟 viewport 解析 - Windows：设置 → 系统 → 显示 → “缩放与布局”调到 175% 或 225%，然后打开网页看按钮是否可点、文字是否换行错乱
- macOS：系统设置 → 辅助功能 → 显示 → 拖动“文本大小”滑块，观察
rem字体是否同步变大，而px值是否卡死不动 - iOS Safari：开启“辅助功能”→“显示与文字大小”→“更大字体”，再启用“更大的辅助功能字体”，此时页面必须仍能双指缩放，且不出现横向滚动条
测试时最容易被忽略的缩放路径
只测 Ctrl/Cmd + 是远远不够的，这三个路径必须人工验证：
任何一条路径下出现内容裁切、焦点丢失、按钮不可触达，都说明 HTML 层级的缩放基础没打牢——别急着调 CSS，先检查 <meta name="viewport"> 是否干净、是否在 最顶上、有没有被 JS 动态覆盖。
