Из-за чего в мобильном браузере может меняться размер шрифта?

Question

[Vitaly Sivkov]

Всем доброго времени суток!
При просмотре сайта с последней версии мобильного Chrome некоторые блоки (а именно блоки, которые содержат результат редактирования через wysiwyg-редактор) меняют размер шрифта.
В чем может быть причина?

Помогает установка параграфам стиля display:inline-block, но такое решение не устраивает.
З.Ы. пример страницы mass-project.ru/vhamilton

Answer 1

[Юрий Лобанов]

Возможно, что это font boosting
Почитайте, может что нароете: habrahabr.ru/post/214559
В инете куча вопросов как бороться с этим, но насколько я понял, однозначного решения нет. Поищите еще в гугле: https://www.google.ru/search?q=font-busting&start=...

Comments

[Vitaly Sivkov]

Спасибо за наводку.
Помогло

<meta name = "viewport" content = "width=device-width, initial-scale=1">

Answer 2

[Иван Беленков]

Не уверен точно, но возможно поможет выставление для body вот этого свойства: -webkit-text-size-adjust: 100%;

Comments

[Vitaly Sivkov]

Нет, не помогает

[Иван Беленков]

Тогда возможно баг самого Хрома. Возможно какие-то настройки, которые сбивают base шрифт. Многие пользователи ругаются на слетевшие шрифты на форумах(т.е. тоже WYSIWYG редакторы).

[Анна Бакурова]

@IoannGrozny это скорее не баг хрома а стили прописали такие

[Иван Беленков]

Попробуйте всем элементам, которые заполняются через WYSIWYG редактор принудительно выставить настройки шрифта, через important.

[Vitaly Sivkov]

@Libris вот похожая проблема iPhone зумит текст, как запретить? . Если это из-за стилей скажите что в них не так, может я что-то упускаю.

[Vitaly Sivkov]

@IoannGrozny уже пробовал. Чего только не перепробовал - помогает только display:inline-block, но и то не везде.

[Иван Беленков]

Как раз в случае айфона всё решается webkit-text-size-adjust, это проверено. Если даже импортант не помогает, то это всё же баг Хрома.

[Артемий Малков]

Спасибо большое, помогло забороть бустинг на айфоне

[seek3r]

мне помогло)

[Семён Лопатин]

Мне тоже помогло.
Спасибо большое)

Answer 3

[Антон]

Мне помогло вот это: html * {max-height:1000000px;}

Answer 4

[Анна Бакурова]

Просто отображение шрифтов на разных устройствах разное. Проблема распространённая но мы тут уже бессильны. Есть решения но они только для некоторых браузеров и то поддержка слабая

Comments

[Vitaly Sivkov]

Один и тот же шрифт одного размера отображается по разному на одной странице.

[Анна Бакурова]

в каких блоках?

[Анна Бакурова]

@Vitaly_S Я вот смотрю где слайдер но там просто инлайн блок убрать нужно и он на место встает но шрифт такой как нужно

[Vitaly Sivkov]

В блоке "Миссия компании" отображается нормально, в блоке "Гамильтон это" увеличенный.

[Vitaly Sivkov]

@Libris это я тестировал. Вы с последней мобильной версии хрома смотрите? У меня в 18 нормально отображалось, но в последней вот такая ерунда.

[Анна Бакурова]

@Vitaly_S Если вы про li то в гальмитон это там стиль 26px (hamilton-is .s-buttons > li - строка 590) у шрифта а миссия там 24. параграфы в блоках одинаковые

[Vitaly Sivkov]

Нет, я не про li. Я про правые блоки.

[Анна Бакурова]

@Vitaly_S да с последней и там всё норм. Я и на ipad и на телефоне и на компе посмотрела всё ок

[Vitaly Sivkov]

@Libris у меня тоже везде все ок, только в последнем хроме на андроиде такой глюк.

[Анна Бакурова]

@Vitaly_S если такое только в одном браузере то это возможно у них после обнов. что то не дотянуто. А так то Я с win8 смотрела и всё нормально было. Тут тогда выход действительно только через meta и то лучше уж так оставить.