Chrome на Android изменяет размер шрифта
Видимо, как только параграф текста достигает определенной длины, Chrome на Android решает изменить размер текста и сделать его больше (вызывая все виды веселья). Теперь у меня есть веб-сайт, на котором около половины p-тегов соответствуют заданному размеру, а другая половина изменяется по своему усмотрению - по-видимому, в зависимости от длины абзаца.
Как же я могу это исправить?
7 ответов
Добавлять max-height: 999999px;
к элементу, на котором вы хотите предотвратить повышение шрифта, или его родителю.
Включая следующее <meta>
тег в документе <head>
:
<meta name="viewport" content="width=device-width, initial-scale=1">
Это правильно установит рамку вида и, таким образом, устранит необходимость в "FontBoosting".
Теперь есть свойство 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. Там в настоящее время нет возможности отключить его.