移动端文本尺寸与换行异常：取消注释行后的布局机制问询

问题场景 #

页面未设置viewport meta标签，移动端视图下，初始状态（第三行文本被注释）渲染正常：文本尺寸符合预期，60字符的内容在width:70ch的body容器内不换行。但取消第三行的注释后，文本感知尺寸变大，且原本60字符的内容出现换行，桌面端无此问题。

相关代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    html { background-color: dimgray; }
    body {
      background-color: gray;
      font-family: monospace;
      width: 70ch;
    }
  </style>
</head>
<body>
  [== 60 char === === === === === === === === === === === ===]<br>
  [== 60 char === === === === === === === === === === === ===]<br>
  [== 60 char === === === === === === === === === === === ===] <!-- 取消注释后的状态 -->
</body>
</html>

核心机制解析 #

• 缺失viewport meta标签的影响：移动端浏览器默认使用layout viewport（通常为980px），并自动缩放页面以适配设备的视觉viewport（屏幕实际尺寸）。此时页面布局基于980px的基准宽度计算，但最终会被缩放到屏幕大小显示。

• 文本膨胀（Font Boosting）机制：这是移动端浏览器为优化可读性的内置逻辑——当检测到文本容器的宽度可能不足以容纳默认大小的文本，或页面内容存在横向溢出风险时，会自动增大文本字体大小，避免用户需要手动缩放页面阅读。

• 初始状态的正常渲染逻辑：
  初始时仅两行带<br>的60字符文本，每行宽度为60ch，小于body设置的70ch容器宽度。浏览器计算后认为容器宽度足够，不会触发文本膨胀，文本以默认字体大小显示，60字符刚好适配70ch宽度，无换行。

• 取消注释后的变化逻辑：
  第三行文本加入后，浏览器重新计算布局时发现：body { width:70ch }基于默认字体换算的像素宽度（约70*16px=1120px）超过了layout viewport的980px，存在横向溢出风险。此时浏览器触发文本膨胀，增大字体大小。由于ch单位是基于当前字体的字符宽度，字体变大后每个字符的实际宽度增加，70ch容器的视觉宽度无法再容纳60个放大后的字符，因此出现换行；同时字体本身尺寸增大，导致文本感知尺寸变大。

内容的提问来源于stack exchange，提问作者Vimes