不同的字體大小取決於字符（響應）

在谷歌瀏覽器的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

不同的字體大小取決於字符（響應）

回答

相關問題