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

84

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

Как мне это исправить?

— Sprax
источник

1

У вас есть пример? Также какая версия Android и Chrome?

— Junuxx 02

93

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

— Moeffju
источник

13

Android Chrome применяет усиление шрифта только к элементам с динамической высотой. Как только вы укажете высоту или максимальную высоту, усиление шрифта не применяется. Установка большого числа max-height проста и не должна иметь побочных эффектов.

— moeffju 01

1

Просто предупреждение за это. Это решило проблему, с которой я столкнулся со шрифтами Chrome на Android, которые не играли хорошо. Однако это нарушило представление сайта ipad на определенных версиях ios.

— Джеймс МакДоннелл,

Кроме того, это вызвало некоторые проблемы на ipad для переходов css3.

— Джеймс МакДоннелл,

4

Это значительно нарушает компоновку многих элементов в Safari (5.1.7), даже если вы не используете максимальную высоту или заданную высоту для начала. Несколько сайтов оказались совершенно непригодными для использования, все структурные divэлементы были неудобно свернуты в верхнюю часть страницы. Не загромождайте свой сайт максимальной высотой! Используйте только там, где это необходимо, и тщательно протестируйте.

— Radley Sustaire

2

Дракончик ... Как раз тогда, когда я подумал, что видел все ... Еще один сумасшедший глюк с еще одним сумасшедшим исправлением. FWIW Я не вижу никаких проблем в Safari и, min-height: 1pxк сожалению, не повлиял. max-height: 999999pxделает свое дело. В моем случае очень длинный переход контента во время входа / выхода из маршрута. Увеличение шрифта произошло либо во время перехода, либо сразу после него, не знаю точно, но это вызвало очень заметный сдвиг.

— Чейз

60

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

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

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

— Джо ДеРоуз
источник

6

Это определенно предпочтительное решение. Если вы заботитесь о том, как все выглядит на мобильных устройствах, возьмите на себя ответственность за свое окно просмотра!

— Пол Айриш

17

Однако это не отключает усиление шрифта.

— Эд Хинчлифф

1

Это, безусловно, исправляет нежелательное масштабирование, и я собираюсь использовать его в будущем.

— Dizzley 06

5

В качестве примечания, у меня есть <meta name="viewport" content="width=device-width, initial-scale=0.5, user-scalable=no">и я все еще получаю ужасное масштабирование хрома

— Сэм

Так лучше, потому что шрифт разборчивый. Он сохраняет пропорции, увеличивая размер для удобства чтения. Отлично для меня.

— Дженнифер Мишель

23

Теперь есть свойство 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.

— Гарет
источник

text-size-adjust: никто не работал у меня на последнем Android Chrome.

— Степан Яковенко

Это предпочтительное решение, если вы используете газ, развернутый как веб-приложение.

— jpp

15

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

— Эд Хинчлифф
источник

вызывал у меня проблемы из-за липкого нижнего колонтитула, вместо этого пришлось делать html body *

— Сабрина Леггетт

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

— Чейз

1

@Chase - в моем случае это были непредсказуемые (динамические) элементы, поэтому нам пришлось использовать *подход. Тем не менее, я бы сказал, что это одна из тех непонятных вещей, о которых вы, вероятно, забудете и могут вызвать проблемы в будущем, поэтому для удобства обслуживания я бы, вероятно, оставил ее, *даже если в то время это было всего одно / несколько элементов.

— Эд Хинчлифф

Сразу после того, как я нашел эту ветку и прокомментировал, я начал замечать дополнительные проблемы, которые, как я подозревал, были связаны с увеличением шрифтов. Итак, конечно же (по крайней мере, на данный момент) * max-height...в моем коде есть LOL

— Chase

6

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

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

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

— метамагикум
источник

2

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

— Рэнди Врогоп
источник

1

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

— Борис Смус
источник

Похоже, это действительно повышение шрифта, но его можно предотвратить, установив, max-height: 999999pxкак описано в @moeffju.

— Чейз