5

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

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

请参阅下面的两个图像以进行可视化 此处页面已加载，用户尚未与页面交互

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

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

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

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

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

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

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

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

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

Javascript可以对此负责吗？

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

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

4

2 回答 2

10

周围有两种解决方案：

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

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

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

于 2020-02-03T18:18:44.427 回答
4

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

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

于 2021-08-24T18:54:43.857 回答