text-size-adjust: 100% 是生产环境首选，它允许用户系统级调节字体大小但禁用浏览器启发式缩放，需设在文本容器（如 .menu）而非内联元素，真机测试必做。
text-size-adjust 是唯一能真正干预移动端浏览器自动缩放字体行为的 CSS 属性，viewport meta 标签对它完全无效。
为什么 text-size-adjust: 100% 比 none 更适合生产环境
它允许用户通过系统设置（如 iOS「更大字体」、Android「字体大小」滑块）主动调节字号，但禁止浏览器基于行宽或字号启发式地“擅自放大”。在真机上同样能解决菜单文字忽大忽小的问题，且不破坏辅助技术链路。
-
text-size-adjust: none会彻底禁用所有缩放能力，包括用户手动调节，可能影响低视力用户 -
text-size-adjust: 100%在 Chrome ≥ 76、Firefox ≥ 69、Safari iOS ≥ 9.3 均原生支持，无需前缀（但建议保留） - 必须设在包含文本的祖先容器上，比如
.footer-nav或#bottommenublock，不能只加在p或li上 - 若父级已设
font-size: 14px，该声明会严格按此渲染，不再叠加缩放因子
常见错误：把 text-size-adjust 写在内联标签或错误层级
这个属性不会作用于文本自身，而是作用于其容器——浏览器需要一个“上下文”来决定是否启用缩放逻辑。写在 a、span 或 em 上完全无效。
- ✅ 正确：加在
.menu、nav、#bottommenublock这类包裹整个文本区块的元素上 - ❌ 错误：只加在
a标签上，即使该链接是菜单唯一内容 - ⚠️ 全局写在
html或body上虽有效，但会牺牲可访问性，不推荐 - ? 若同时用了
transform: scale()或zoom，可能干扰计算，需一并排查
如何确认 text-size-adjust 已生效
别只信源码写了，得看浏览器最终计算值。打开 Chrome DevTools → Elements 面板 → 选中目标容器 → 切到 Computed 标签页 → 搜索 text-size-adjust。
- 看到值为
100%或none才算成功；显示auto表示未命中或被覆盖 - 如果值是
auto，检查是否被更具体的 CSS 规则覆盖，或选择器没匹配到实际容器 - 注意：该属性仅对移动端生效，桌面浏览器忽略，所以不要用媒体查询包裹
- 兼容性兜底可加前缀：
-webkit-text-size-adjust、-moz-text-size-adjust、-ms-text-size-adjust
最易被忽略的一点：这个问题在 DevTools 响应式预览里根本复现不了——因为它的模拟器默认禁用自动缩放。真机测试不是可选项，是必经步骤。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
