移动端浏览器（尤其是 Android Chrome）会基于内容启发式算法自动调整文本大小，导致相同 CSS 字体声明在 DevTools 模拟器与真机上渲染不一致，text-size-adjust: none 可彻底禁用该行为。
移动端浏览器（尤其是 android chrome）会基于内容启发式算法自动调整文本大小，导致相同 css 字体声明在 devtools 模拟器与真机上渲染不一致，`text-size-adjust: none` 可彻底禁用该行为。
这是一个在响应式开发中容易被忽视、却极具迷惑性的典型问题：两组 <a> 元素拥有完全相同的 CSS 字体设置（如 font-size: 1rem 或 1em），在 Chrome DevTools 的响应式预览中尺寸完全一致，但在真实 Android 手机（如 401ppi 的高密度屏）上，位于 <footer> 中的链接文字却明显更小——而 iPhone 用户却无法复现。这并非 CSS 优先级、单位换算（px/rem/em）或视口配置错误所致，根源在于移动端浏览器的自动文本缩放机制。
现代 Android 浏览器（特别是 Chrome）内置了一项可访问性优化策略：当检测到块级容器内文本行宽过窄、行高过小或字体绝对尺寸偏小（例如小于 16px）时，会主动放大文本以提升可读性。该行为独立于 viewport 设置和 CSS 单位，且仅作用于特定上下文中的文本节点——这正是为何 <main> 与 <footer> 中看似相同的样式，在真机上呈现差异：浏览器可能仅对 footer 区域的链接块触发了“最小字号保护”缩放，而 main 区域因布局上下文不同未被干预。
✅ 根本解决方案：禁用自动文本缩放
在全局 CSS 中添加以下声明即可消除该非预期行为：
/* 推荐：作用于根元素，确保全站生效 */
html {
text-size-adjust: none;
}
/* 或针对特定容器（如 footer）精准控制 */
#bottommenublock,
.flist {
text-size-adjust: none;
}⚠️ 注意事项：
- text-size-adjust 是标准 CSS 属性（MDN 文档），现代浏览器支持良好；Android Chrome ≥ 53、Firefox for Android ≥ 68、Safari iOS ≥ 9 均支持 none 值。
- 避免使用已废弃的 -webkit-text-size-adjust: none（旧版 Safari 专用），现代项目应优先使用无前缀版本。
- 不要依赖 !important 强制覆盖字体大小（如原代码中的 font-size: 1em!important），这无法对抗浏览器层的渲染干预；text-size-adjust 必须在应用字体样式前生效。
- 若需兼顾可访问性（如尊重用户系统级“增大文字”设置），可改用 text-size-adjust: 100%，它允许缩放但禁用自动启发式放大，平衡兼容性与控制力。
? 补充验证建议：
- 在真机 Chrome 中打开 chrome://flags → 搜索 Text autosizing → 禁用该实验性功能，观察是否恢复一致；
- 使用 WebPageTest 的真实设备测试报告，确认 text-size-adjust 生效后各区块 computed font-size 是否严格相等；
- 对比 iPhone 与 Android 渲染差异——iOS Safari 默认禁用此类启发式缩放，因此问题常表现为“仅 Android 失效”，这正是该机制的典型指纹。
通过一行标准 CSS，即可让设计意图在所有设备上精准落地。记住：当 DevTools 与真机表现分裂，且排除了 CSS 层叠、单位换算、视口配置后，text-size-adjust 往往就是那个沉默的“幕后推手”。
