Различного размера шрифта в зависимости от количества символов (чувствительных)

Question

В Device Mode из Google Chrome, то font-size элемента (p, h1, h2 ...) изменяется число символов изменяется.

Этого не происходит, если режим устройства выключен, но это происходит на моем мобильном устройстве.

На следующем рисунке показан правильный размер:

Если добавить больше символов, font-size увеличивается. Это неправильный размер:

Я не хочу font-size изменить с числом символов. Как я могу это исправить?

Edit: включая CSS:

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

Edit2: Что я, Я забыл сказать, в том, что эта проблема существует только тогда, когда я работаю с шаблоном Joomla в Joomla. Неважно, использую ли я css или нет.

Answer 1

Я решил проблему, установив метаданные в viewport.

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

Answer 2

Я не уверен в просмотре рабочего стола, но это похоже на известную проблему в версии 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/, если вам интересно.