适用于Android的Google Chrome浏览器上的字体大小显示问题 [英] Font size display issue on Google Chrome for Android

问题描述

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

I have a webpage where the font-size of body 16px.

在适用于Android的Google Chrome浏览器上，我遇到以下问题:最初加载页面时，未定义字体大小(因此从主体继承字体大小)的元素中的字体大小更大大于16像素(如您继续阅读就会看到的那样，没有明显的方法可以计算呈现的文本的尺寸要大到的倍数).当用户向下滚动时，呈现的文本大小更改为16px.

On Google Chrome for Android, I have the following problem: When the page initially loads, the font size in elements which don't have a font-size defined (and therefore inherit the font-size from the body) is bigger than 16px (as you will see if you read on, there is no obvious way to calculate the multiple to which the size of the rendered text is bigger). When the user scrolls down the rendered text size changes to 16px.

请参见下面的两幅图像

在上面的屏幕截图中，该页面已加载，并且用户尚未与该页面进行交互.

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

尽管事实是两个字体大小之间存在视觉差异.在用户滚动并且文本较大之前，以及在用户滚动并且文本尺寸较小之后—在所有情况下，字体大小都计算为16px.

Despite the fact that there is a visual difference between the two font-sizes. Before the user scrolls and the text is larger and after the user scrolls and the text size is smaller — the font-size in all cases computes as 16px.

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

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

If I change the of the text, the rendered text size increases or decreases (depending on whether or not the number is greater or less than 16). In both cases though the text size increases in proportion to the original text size.

似乎浏览器显示的是16px的特定大小，然后在用户滚动时会更改该大小.

It seems like the browser is showing 16px as a certain size and that it then changes this size when the user scrolls.

在这里，我已经将字体大小增加到20px.字体大小会增加，但会与原始呈现的文本大小成比例增加

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

I don't think so. I have disabled javascript in the browser and reloaded the page and the problem still persists.

有人知道这可能是什么原因吗?

Does anyone have an idea about what might be causing this?

推荐答案

有两种解决方案:

如此处 Android上的Chrome调整字体大小所述，如果到达任何文本，就会发生此问题一定长度.

As described here Chrome on android resizes font the issue occurs if any text reach a certain length.

1. 添加最大高度:999999px;"到文本周围的元素.
2. <元名称=视口" content ="width = device-width，initial-scale = 1">

对我来说，第一种解决方案无效.

For me solution no 1 worked.

这篇关于适用于Android的Google Chrome浏览器上的字体大小显示问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！