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

Question 1

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

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

Question 2

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

Question 3

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

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

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

Question 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.

Question 5

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

Question 6

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

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

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

Question 7

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

Question 8

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

Answer 1

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

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

Answer 2

1

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

Junuxx 02

Answer 3

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делает свое дело. В моем случае очень длинный переход контента во время входа / выхода из маршрута. Увеличение шрифта произошло либо во время перехода, либо сразу после него, не знаю точно, но это вызвало очень заметный сдвиг.

Чейз

Answer 4

13

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

moeffju 01

Answer 5

1

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

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

Answer 6

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

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

Answer 7

4

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

Radley Sustaire

Answer 8

2

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

Чейз

Answer 9

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">и я все еще получаю ужасное масштабирование хрома

Сэм

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

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

Answer 10

6

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

Пол Айриш

Answer 11

17

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

Эд Хинчлифф

Answer 12

1

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

Dizzley 06

Answer 13

5

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

Сэм

Answer 14

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

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

Answer 15

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

Answer 16

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

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

Answer 17

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

jpp

Answer 18

15

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

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

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

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

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

Чейз

1

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

Эд Хинчлифф

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

Chase

Answer 19

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

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

Answer 20

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

Чейз

Answer 21

1

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

Эд Хинчлифф

Answer 22

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

Chase

Answer 23

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

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

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

Answer 24

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

Answer 25

1

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

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

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

Чейз

Answer 26

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

Чейз

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

Ответы: