Chrome на android изменяет размер шрифта

По-видимому, однажды абзац текста достигает определенной длины, хром на android решает изменить размер текста и сделать его более крупным (вызывая всевозможные развлечения). Теперь у меня есть веб-сайт, где около половины p-тегов соответствуют размеру, который я установил, а другая половина изменяется, как им заблагорассудится - видимо, в зависимости от длины абзаца.

Как я могу это исправить?

Ответ 1

Добавьте max-height: 999999px; в элемент, который вы хотите предотвратить добавление шрифта или его родительский элемент.

Ответ 2

Включите в документ <head> следующий тег <meta>:

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

Это правильно установит рамку представления и, таким образом, устранит необходимость в "FontBoosting".

Ответ 3

Поместите это в свой reset. html * {max-height:1000000px;}

Ответ 4

Теперь есть свойство CSS, которое вы можете установить для управления этим:

-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;

См. https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust

Ответ 5

После некоторых тестов это правило помогло мне. Должен быть добавлен либо к элементу, содержащему расширенный текст, либо к родительскому в зависимости от структуры div/table.

element or parent element { 
    /* prevent font boosting on mobile devices */
    width: 100%;
    height: auto;
    min-height: 1px;
    max-height: 999999px;
}

Возможно, значения ширины и высоты должны быть скорректированы в соответствии с вашими потребностями.

Ответ 6

Я нашел решение для своих страниц: дайте родительскому элементу ширину и высоту! Шрифт не выходит за пределы этих границ, и поэтому он останется небольшим (er).

Ответ 7

Это называется "усиление шрифта" и подробно описано в этой ошибке WebKit. В настоящее время нет возможности отключить его.