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

В Режиме устройства Google Chrome 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 или нет.


html css responsive joomla
person Smoothi    schedule 01.01.2017    source источник
comment
Никто не может дать окончательный ответ, не глядя на ваш код или не имея возможности его воспроизвести. Пожалуйста, поделитесь своим кодом.   -  person Sean Mishra    schedule 01.01.2017
comment
Не зная, как выглядит ваш код, все, что я могу предложить, это попробовать определить все ваши шрифты как px вместо смеси единиц (согласно вашему комментарию). Если вам нужна реальная помощь, вам нужно будет предоставить код. Попробуйте разместить свой код на fiddlesalad или jsfiddle.   -  person Travis Heeter    schedule 01.01.2017

Ответы (2)


arrow_upward
2
arrow_downward

Я не уверен в просмотре на рабочем столе, но, похоже, это известная проблема в Android-версии Google Chrome. Вот несколько возможных решений, которые вы можете попробовать:

  1. См. Chrome на Android изменяет размер шрифта, в котором объясняется, как предотвратить это.

  2. Вместо того, чтобы исправлять этот вопрос, я бы посоветовал сделать ваш веб-сайт полностью адаптивным для всех размеров экрана.

    Вы можете использовать медиазапросы CSS, см. https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries, чтобы узнать, как их написать.

  3. В качестве альтернативы, если вы готовы использовать jQuery для достижения этой цели, вам может помочь FlowType.JS. По сути, он создает для вас адаптивный текст, автоматически определяя размер экрана и изменяя размер текста.

    Он также, по-видимому, оптимизирует количество символов в каждой строке для удобства чтения. Его веб-сайт находится по адресу http://simplefocus.com/flowtype/, если вам интересно.

person Zak    schedule 01.01.2017
comment
Звучит интересно. Я забыл сказать, что использую Joomla и считаю, что Joomla использует JQuery. Может быть, Joomla уже использует Flowtype с некоторыми настройками? - person Smoothi; 01.01.2017
comment
Маловероятно, так как это довольно небольшой проект. Если вы создадите свою собственную тему, вы можете включить ее. Кроме того, если вы нашли мой ответ полезным, не могли бы вы принять его, пожалуйста? - person Zak; 01.01.2017

arrow_upward
0
arrow_downward

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

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