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

【问题标题】：Font size display issue on Google Chrome for AndroidAndroid 版 Google Chrome 上的字体大小显示问题
【发布时间】：2020-03-24 11:31:24
【问题描述】：

我有一个网页，其字体大小为body 16px。

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

查看下面的两张图片进行可视化

在上面的屏幕截图中，页面已经加载，用户还没有与页面进行交互。

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

当文字变大变小时 - 两种尺寸都计算为 16px

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

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

如果改变大小会发生什么？

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

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

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

Javascript 可以对此负责吗？

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

有人知道是什么原因造成的吗？

【问题讨论】：

标签： android html css font-size android-chrome

【解决方案1】：

有两种解决方案：

如Chrome on android resizes font 所述，如果任何文本达到一定长度，就会出现问题。

添加“最大高度：999999px;”到文本周围的元素。
<meta name="viewport" content="width=device-width, initial-scale=1">

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

【讨论】：

我同意您的解决方案 n°1。我有同样的问题，当我有 max-height: 999999px;到我的文本容器，字体大小恢复正常。谢谢

【解决方案2】：

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

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

查看详情：https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust

【讨论】：