为什么移动端网页中字符串长度变化会导致文本字号渲染不一致？

问题描述 #

请查看下方两个简单网页：二者唯一区别是以“This is a very”开头的文本长度不同，但在移动设备上的渲染效果存在明显差异。以下截图来自Chrome开发者工具，我在安卓、Kindle实体设备上测试也得到相同结果。为什么两个页面的文本渲染字号不一致？注：以下两个文件仅作演示使用，我可以通过编辑Fontsize.html添加文本，让其显示的文本字号变大，对此现象十分困惑。

Fontsize.html 代码

<html>
<body>

<span  style="font-family:'Open Sans';font-size:20pt">SAMPLE TEXT - 20pt</span>

      <br><br>This is a very long line that may well force it into the larger font but we cant be sure can we

</body>
</html>

FontSizeLarger.html 代码

<html>
<body>

<span  style="font-family:'Open Sans';font-size:20pt">SAMPLE TEXT - 20pt</span>

      <br><br>This is a very long line that may well force it into the larger font but we cant be sure can we
      This is a very long line that may well force it into the larger font but we cant be sure can we
      This is a very long line that may well force it into the larger font but we cant be sure can we

</body>
</html>

页面渲染效果

问题解答 #

核心原因

这是WebKit内核移动端浏览器（包括Chrome安卓版、Kindle内置浏览器等）自带的**字体自动调整（Font Boosting/Text Autosizing）**特性导致的。
该特性是浏览器为了提升小屏可读性设计的：当页面没有配置移动端适配的viewport元标签时，浏览器会默认把页面渲染在一个较宽的虚拟视口上，再缩小到手机屏幕尺寸显示。此时如果页面中存在没有明确设置字号、且长度较长的文本，浏览器就会自动放大这段文本的字号，避免用户需要手动放大才能看清内容。

两个页面表现不同的原因

你的两个测试页面都没有配置viewport标签，且那段以“This is a very”开头的文本没有手动设置font-size，继承的是body的默认字号：

• 短文本页面的文本长度没有达到浏览器的触发阈值，所以没有触发自动放大，按默认字号渲染
• 长文本页面的文本长度达到了阈值，触发了Font Boosting规则，字号被浏览器自动放大，所以显示的字号更大

解决方法

1. 首选方案：在页面<head>标签内添加viewport适配声明，从根源上避免浏览器的自动适配行为：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2. 也可以通过CSS规则全局禁用字体自动调整特性：

* {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

3. 给所有文本元素明确设置font-size属性，也可以避免浏览器自动调整字号。

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