viewport配置错误会直接破坏文本缩放能力，常见错误包括user-scalable=no、maximum-scale=1.0或缺失标签；ios safari对minimum-scale=1.0也敏感；应显式声明user-scalable=yes，避免maximum/minimum-scale，检查overflow:hidden和height:100%组合；系统级文本缩放仅影响rem/em，px/vw/transform无效；transform缩放导致文字模糊、点击偏移且不被屏幕阅读器识别；200%缩放时布局断裂比文字模糊更致命，需实测交互功能。
viewport 配置错误会直接破坏文本缩放能力
用户在浏览器中按 Ctrl/Cmd + + 放大文字时，如果页面没反应，大概率是 <meta name="viewport"> 写错了。常见错误包括：user-scalable=no、maximum-scale=1.0 或干脆缺失该标签。iOS Safari 尤其敏感——哪怕只写 minimum-scale=1.0，也会锁死双击缩放。
实操建议：
- 必须显式声明
user-scalable=yes，不要依赖“默认值”，很多模板删掉了它 - 删掉所有
maximum-scale和minimum-scale，它们和可访问性目标冲突 - 检查
和是否有overflow: hidden或height: 100%组合，这会让 Safari 认为“无可缩放内容”而禁用双击
text-only 缩放下 rem/em 单位才真正生效
操作系统级文本缩放（如 Windows 显示设置调到 125%，macOS 辅助功能里拉大文本）只影响基于 rem 或 em 的字体大小，对 px、vw 或 transform: scale() 完全无感。这意味着：用 px 写死字号的页面，在系统级放大时文字不变，但布局可能错乱；而用 rem 的页面，只要根元素 font-size 被系统缩放影响，整个文本流就会同步变大。
实操建议：
- 根元素
html { font-size: 16px; }是起点，系统缩放会按比例调整这个值 - 避免在关键文本上混用
px和rem，否则缩放后行高、字间距会失衡 -
vw单位虽响应视口，但不受系统文本缩放影响，慎用于正文——适合标题或装饰性文字
transform 缩放导致点击偏移与文字模糊
用 transform: scale(1.2) 或 zoom: 1.2 强制放大整个页面，表面看字号变大了，实际是渲染层拉伸。结果是：文字边缘发虚、固定定位元素错位、click 事件坐标偏移（尤其在触摸设备上），且完全绕过浏览器原生缩放逻辑，无法被屏幕阅读器识别。
实操建议：
- 彻底放弃
transform: scale()做“全局放大”，它和可访问性目标背道而驰 - 需要动态调节字号时，改用 JS 修改
document.documentElement.style.fontSize，并存入localStorage - 若必须缩放视觉区域（如地图、图表），用
scale()配合transform-origin: 0 0和will-change: transform，但要重算 touch 事件坐标
200% 缩放时布局断裂比文字模糊更致命
WCAG 要求支持至少 200% 的文本缩放，但很多测试只盯着“字是否变大”，忽略了布局崩溃：导航栏被挤出视口、按钮重叠、表单控件截断、overflow: hidden 导致关键信息消失。这些不是视觉问题，而是功能不可用——用户根本点不到提交按钮。
实操建议：
- 测试时手动设浏览器缩放为 200%，然后滚动、点击、输入，不只看静态截图
- 禁用
overflow: hidden在容器上，改用min-height+padding预留空间 - 确保触摸目标（按钮、链接）在 200% 缩放后仍 ≥ 48×48px，否则手指点不准
viewport 是否干净、rem 是否贯穿、以及有没有把 overflow: hidden 当万能胶水用。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
