未设置viewport为何导致移动端长文本字体异常变大？

问题复现 #

初始短文本代码在Chrome移动模拟器中显示正常，div默认字体大小为16px：

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Document</title>
    </head>
    <body>
        <div>This is not so long a piece of text.</div>
    </body>
</html>

修改为超长文本后，在iPhone SE（375*667）模拟器中，div的计算字体大小变为41.791px，字体突然变大：

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Document</title>
    </head>
    <body>
        <div>This is a very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long piece of text.</div>
    </body>
</html>

添加viewport元标签后问题解决，但疑惑未设置viewport时，文本长度不同为何会导致字体大小变化。

原因解析 #

这是移动端浏览器的文本自动适配机制在起作用：

• 未设置viewport时，浏览器会用默认的"布局视口"（通常宽980px左右）渲染页面，再缩放到设备物理视口显示。
• 短文本能在布局视口中正常换行，适配缩放后的显示区域，浏览器不会调整字体。
• 当文本过长时，浏览器判断横向滚动阅读体验极差，就会触发text autosizing（文本自动调整）特性——自动放大字体，让文本尽可能适配设备可视宽度，避免用户左右滑动，这就是长文本下字体突然变大的原因。
• 添加<meta name="viewport" content="width=device-width, initial-scale=1.0">后，布局视口与设备物理视口宽度一致，浏览器无需再做自动缩放适配，字体就回到了默认的16px。

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