Android 版 Google Chrome 上的字体大小显示问题

Question

我有一个字体大小为body16px的网页。

在 Android 版 Google Chrome 上，我遇到以下问题：当页面最初加载时，未定义字体大小（因此从正文继承字体大小）的元素中的字体大小大于 16px（如果继续阅读，您将看到，没有明显的方法来计算渲染文本大小的倍数）。当用户向下滚动时，呈现的文本大小更改为 16px。

请参阅下面的两个图像以进行可视化

在上面的屏幕截图中，页面已加载，用户尚未与页面交互。

在上面的屏幕截图中，页面已加载并且用户已与页面进行了交互。注意显示“0% 兴趣”的元素上的字体大小现在更小了

当文本越来越大时 - 两种尺寸都计算为 16px

尽管两种字体大小之间存在视觉差异。在用户滚动之前，文本变大，在用户滚动之后，文本变小——字体大小在所有情况下都计算为 16px。

在上图中，我们可以看到字体大小在两种情况下都是 16px，但是两个渲染的文本大小明显不同

如果我更改文本的，呈现的文本大小会增加或减少（取决于数字是大于还是小于 16）。在这两种情况下，尽管文本大小与原始文本大小成比例增加。

浏览器似乎将 16px 显示为特定大小，然后在用户滚动时更改此大小。

在这里，我将字体大小增加到 20 像素。虽然字体大小确实增加了，但它与原始渲染的文本大小成比例增加

我不这么认为。我在浏览器中禁用了 javascript 并重新加载了页面，但问题仍然存在。

有没有人知道可能导致这种情况的原因？

Answer 1

周围有两种解决方案：

如此处所述，Android 上的 Chrome 会调整字体大小，如果任何文本达到特定长度，则会出现此问题。

对我来说，没有 1 的解决方案有效。

Answer 2

有所谓的字体大小“调整”。尝试禁用它：

text-size-adjust: none;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;