不同的字体大小取决于字符数（响应式）答案

【问题标题】：Different font-size depending on number of chars (responsive)不同的字体大小取决于字符数（响应式）
【发布时间】：2017-05-15 22:31:27
【问题描述】：

在 Google Chrome 的 Device Mode 中，元素（p、h1、h2、...）的 font-size 会随着字符数的变化而变化。

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

下图为正确尺寸：

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

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

编辑：包括 CSS：

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

编辑2：我忘记说的是，这个问题只存在于我在 joomla 中使用 joomla 模板时。用不用css没关系。

【问题讨论】：

如果不查看您的代码或无法复制它，任何人都无法给出明确的答案。请分享您的代码。
在不知道您的代码是什么样子的情况下，我只能建议您尝试将所有字体定义为 px 而不是混合单位（根据您的评论）。如果您需要真正的帮助，您将需要提供代码。尝试将您的代码放在fiddlesalad 或jsfiddle。

【解决方案1】：

我通过调整视口元数据解决了这个问题。

<meta name="viewport" content="width=device-width, maximum-scale=1.0" />

【讨论】：

【解决方案2】：

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

请参阅Chrome on android resizes font，其中解释了如何防止这种情况发生。
与其对这个问题实施修复，我建议让您的网站完全响应所有屏幕尺寸是更好的做法。

您可以使用 CSS 媒体查询，请参阅 https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries 了解如何编写它们。
或者，如果您准备使用 jQuery 来实现这一点，FlowType.JS 可能会有所帮助。它基本上通过自动检测屏幕大小和调整文本大小来为您创建响应式文本。

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

【讨论】：