当html页面未设置viewport元标签时，移动浏览器会启用文本大小自适应（text-size-adjust）机制，对占满屏幕宽度的长文本自动放大字体以提升可读性，导致实际渲染字号远超css默认值。
当html页面未设置viewport元标签时，移动浏览器会启用文本大小自适应（text-size-adjust）机制，对占满屏幕宽度的长文本自动放大字体以提升可读性，导致实际渲染字号远超css默认值。
现代移动浏览器（如Chrome、Safari iOS）为改善小屏阅读体验，内置了一套文本尺寸自适应（Text Size Adjustment）算法。该机制在页面未声明 <meta name="viewport"> 时被默认激活：当某段纯文本所在的块级元素（如 <div>）水平方向占据视口100%宽度，且内容过长无法自然换行（或换行后单行仍极宽）时，浏览器会<strong>在不改变布局盒模型的前提下，动态增大其字体大小</strong>——这正是你在iPhone SE模拟器中观察到 <code>16px → 41.79px 跳变的根本原因。
该行为并非CSS继承或重排所致，而是渲染层的启发式优化。例如以下无viewport页面：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Text Inflation Demo</title> <!-- 缺失 viewport meta 标签 --> </head> <body> <div>This is a very very very... (超长单行文本)</div> </body> </html>
在Chrome DevTools移动模拟器中，即使CSS未指定font-size，该<div>的<strong>计算样式（Computed Styles）中<code>font-size也会显著升高，而width、line-height等布局属性保持不变——这印证了“仅放大文字，不破坏布局”的设计原则。
✅ 推荐解决方案（生产环境必选）：
始终在中声明响应式viewport，这是Web开发的基石实践：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
⚠️ 备选方案（仅限调试或特殊场景）：
若因历史原因暂无法添加viewport标签，可通过CSS禁用文本缩放：
/* 全局禁用文本自适应 */
html {
-webkit-text-size-adjust: none; /* Safari / Chrome */
-ms-text-size-adjust: none; /* IE */
text-size-adjust: none; /* 标准语法 */
}? 注意：
text-size-adjust: none会完全关闭浏览器的文本放大逻辑，可能影响低视力用户的可访问性。因此绝不建议替代viewport标签，仅作为临时调试手段。
总结：viewport不仅是控制缩放的开关，更是向浏览器宣告“本页已适配移动设备”的关键信号。缺失它，浏览器便会启动兜底的可读性增强策略——而文本自动放大，正是这一策略最典型的副作用。养成添加viewport的习惯，是从源头规避此类“神秘字号膨胀”问题的唯一可靠方式。
