Очевидно, як тільки абзац тексту досягає певної довжини, Google Chrome на Android вирішує змінити розмір тексту і збільшити його (викликаючи всілякі розваги). Зараз у мене є веб-сайт, де приблизно половина pтегів відповідає розміру, який я встановив, а інша половина змінюється, як їм заманеться - очевидно, в залежності від довжини абзацу.
Як, богу, це виправити?
Відповіді:
Додайте max-height: 999999px;до елемента, який ви хочете запобігти посиленню шрифту, або його батьківського елемента.
divелементи були незграбно згорнуті до верхньої частини сторінки. Не "покривайте" свій сайт визначенням максимальної висоти! Використовуйте лише там, де це потрібно, і ретельно протестуйте.
min-height: 1pxна жаль, не мав ефекту. max-height: 999999pxробить фокус, хоча. Моя справа була дуже тривалим переходом вмісту під час в'їзду / виїзду з маршруту. Підсилення шрифту відбувалося або під час, або просто після переходу, не впевнений, який, але це спричинило дуже помітний зсув.
Включіть такий <meta>документ у документ <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">
Це дозволить правильно встановити рамку перегляду і, таким чином, усуне потребу в "FontBoosting".
<meta name="viewport" content="width=device-width, initial-scale=0.5, user-scalable=no">і я все ще отримую жахливе масштабування Chromes
Зараз є властивість 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
Помістіть це у свій скидання. html * {max-height:1000000px;}
*підхід. Тим не менш, я б стверджував, що це одна з тих незрозумілих речей, про яку ви, напевно, забудете і можуть спричинити проблеми в майбутньому, тому для ремонтопридатності я б, мабуть, залишив це, *навіть якщо на той час це було лише одне / одне мало елементів.
* max-height...у моєму коді є LOL
Після деяких тестів це правило мені допомогло. Потрібно додати або до елемента, що містить підсилений текст, або його батьківського, залежно від структури div / table.
element or parent element {
/* prevent font boosting on mobile devices */
width: 100%;
height: auto;
min-height: 1px;
max-height: 999999px;
}
Можливо, значення ширини та висоти повинні бути скориговані відповідно до ваших потреб.
Я знайшов рішення для своїх сторінок: надайте батьківському елементу ширину та висоту! Шрифт не буде виходити за межі цих меж, і тому він залишиться маленьким (е-е).
Це називається "підвищення шрифтів" і докладно описано в цій помилці WebKit . Наразі немає можливості його відключити.
max-height: 999999pxяк описано @moeffju.