По-видимому, однажды абзац текста достигает определенной длины, хром на android решает изменить размер текста и сделать его более крупным (вызывая всевозможные развлечения). Теперь у меня есть веб-сайт, где около половины p-тегов соответствуют размеру, который я установил, а другая половина изменяется, как им заблагорассудится - видимо, в зависимости от длины абзаца.
Как я могу это исправить?
Добавьте max-height: 999999px; в элемент, который вы хотите предотвратить добавление шрифта или его родительский элемент.
Включите в документ <head> следующий тег <meta>:
<meta name="viewport" content="width=device-width, initial-scale=1">
Это правильно установит рамку представления и, таким образом, устранит необходимость в "FontBoosting".
Поместите это в свой reset. html * {max-height:1000000px;}
Теперь есть свойство 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
После некоторых тестов это правило помогло мне. Должен быть добавлен либо к элементу, содержащему расширенный текст, либо к родительскому в зависимости от структуры div/table.
element or parent element {
/* prevent font boosting on mobile devices */
width: 100%;
height: auto;
min-height: 1px;
max-height: 999999px;
}
Возможно, значения ширины и высоты должны быть скорректированы в соответствии с вашими потребностями.
Я нашел решение для своих страниц: дайте родительскому элементу ширину и высоту! Шрифт не выходит за пределы этих границ, и поэтому он останется небольшим (er).
Это называется "усиление шрифта" и подробно описано в этой ошибке WebKit. В настоящее время нет возможности отключить его.