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

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

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

See the two images below for a visualisation

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

In the above screenshot the page has loaded and the user has interacted with the page. Notice how the font size on the element showing "0% interest" is now smaller

当文本较大和较小时 - 两种尺寸均计算为 16px

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

In the above image we can see that the font-size is in both cases 16px but that the two rendered texts are clearly different in size

如果尺寸改变会发生什么？

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

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

Here I've increased the font-size to 20px. Whilst the font size does increase, it increases in proportion to the original rendered text size

Javascript 能对此负责吗？

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

有谁知道可能是什么原因造成的？

周围有两种解决方案：

如此处所述Android 上的 Chrome 调整字体大小 https://stackoverflow.com/questions/11289166/chrome-on-android-resizes-font如果任何文本达到一定长度，就会出现此问题。

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

对我来说，第一个解决方案有效。