html - 不同的字体大小取决于字符数(响应式)

Question

在Device Mode Google Chrome 的 font-size 元素(p, h1, h2, ...)随着字符数的变化而变化。

当设备模式关闭时不会发生这种情况，但它会发生在我的移动设备上。

下图为正确尺寸:

如果我添加更多字符，font-size 会增加。这是错误的尺寸:

我不希望 font-size 随着字符数的变化而变化。我该如何解决这个问题？

编辑:包括 CSS:

body * { font-size: 20px; }
p { font-size: 1em; }
h1 { font-size: 2em; }

编辑2:我忘记说的是，这个问题只存在于我在 joomla 中使用 joomla 模板时。我是否使用 css 并不重要。

Answer 1

我不确定桌面查看，但这似乎是 Android 版 Google Chrome 上的一个已知问题。以下是您可能想尝试的一些可能的解决方案:

1. 参见 Chrome on android resizes font其中解释了如何防止这种情况发生。

2. 与其实现该问题的修复，不如让您的网站完全响应所有屏幕尺寸是更好的做法。

   您可以使用 CSS 媒体查询，参见 https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries了解如何编写它们。

3. 或者，如果您准备使用 jQuery 来实现此目的，FlowType.JS 可能会有所帮助。它基本上通过自动检测屏幕大小和调整文本大小来为您创建响应式文本。

   它显然还优化了每行的字符数，以便于阅读。它的网站是http://simplefocus.com/flowtype/如果你有兴趣。