Question

在Google Chrome浏览器Device Mode中，元素font-size p，h1，h2，...）的数量会更改为人物变化。

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

下图显示了正确的尺寸：

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

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

修改：包括CSS：

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

EDIT2 ：我忘记说的是，当我在joomla中使用joomla模板时，这个问题才存在。如果我使用css无关紧要。

Answer 1

我不确定桌面查看，但这似乎是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/。

Answer 2

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

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