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

Question

我有一个网页，其中 body 的字体大小16像素。

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

请参阅下面的两个图像以获得可视化


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


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

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

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


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

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

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

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


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

Javascript可以对此负责吗？

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

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

Answer 1

周围有两种解决方案:

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

添加“最大高度:999999px;”到文本周围的元素。

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

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