不同的字体大小取决于字符（响应）

在谷歌浏览器的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，都没关系。

来源

2017-01-01 Smoothi

没有任何人可以在没有查看您的代码或能够复制它的情况下给出明确的答案。请分享您的代码。 – CoderGuy

不知道你的代码是什么样的，我建议的只是尝试将所有的字体定义为“px”而不是混合单元（根据你的评论）。如果你需要真正的帮助，你将需要提供代码。尝试将代码放在[fiddlesalad]（http://fiddlesalad.com/）或[jsfiddle]（https://jsfiddle.net/）上。 –

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

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

来源

2017-01-01 19:20:44 Smoothi

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

来源

2017-01-01 16:35:54 Zak

这听起来很有趣。我忘了说我使用Joomla，我相信Joomla使用JQuery。也许Joomla已经使用Flowtype的一些配置？ – Smoothi

不太可能，因为它是一个相当小的项目。如果你创建自己的主题，你可以包括但是。另外，如果你发现我的答案有用，你会考虑接受吗？ – Zak

不同的字体大小取决于字符（响应）

回答

相关问题