Запретить Chrome изменять размер шрифта
Рассмотрим следующий фрагмент кода. Я установил размер шрифта всего документа на 16 пикселей. Однако когда я открываю эту страницу на Galaxy S9+, удаленная отладка показывает, что вычисленный стиль размера шрифта абзаца во втором разделе составляет 17,6 пикселей. Кажется, -webkit-text-size-adjust: none не работает. Я также использовал правильный метатег для ширины.
Я использую Chrome 127.0.6533.103 на Android. Есть ли способ предотвратить изменение размера шрифта Chrome в этой ситуации?
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<title>Webpage</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
height: 100%;
-webkit-text-size-adjust: none;
}
body {
height: 100%;
font-size: 16px;
color: black;
background-color: whitesmoke;
}
section {
background-color: lightgray;
margin: 1rem 0;
padding: 1rem 2rem;
}
.flex-container {
display: flex;
justify-content: space-between;
}
</style>
</head>
<body>
<main>
<section>
<div class = "flex-container">
<div>
<p>Some sample text in original font size.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</div>
</section>
<section>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum magni eligendi
officia velit corporis dolorum reiciendis autem aperiam veniam, voluptatum illum
cum est. Accusamus deleniti numquam corporis mollitia libero tempora?
</p>
</section>
</main>
</body>
</html>
Вот результат вывода.
@AHaworth: Я тоже пробовал text-size-adjust: none, но безрезультатно. Я попытался поместить текст в контейнер. Удивительно, но установка display: flex или display: inline-block для контейнера предотвращает изменение размера Chrome. Причина, по которой первый раздел имеет исходный размер шрифта, заключается в том, что это гибкий контейнер! Я не понимаю, почему хром так делает! Им следует просто оставить такие вопросы на усмотрение дизайнера веб-сайта.
Попробуйте text-size-adjust: 100%;.
@htor: Это тоже не работает!
Ответы 1
Я попытался поместить текст в контейнер. Удивительно, но установка display: flex или display: inline-block для контейнера не позволяет Chrome изменять размер шрифта. Причина, по которой первый раздел имеет исходный размер шрифта, заключается в том, что это гибкий контейнер! Я не понимаю, почему хром так делает! Им следует просто оставить такие вопросы на усмотрение дизайнера веб-сайта. Этот хак также работает, если установить max-height: 1000000px в настройках сброса или для контейнера. Вот модифицированная версия приведенного выше кода.
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<title>Webpage</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
height: 100%;
-webkit-text-size-adjust: none;
}
body {
height: 100%;
font-size: 16px;
color: black;
background-color: whitesmoke;
}
section {
background-color: lightgray;
margin: 1rem 0;
padding: 1rem 2rem;
}
.flex-container {
display: flex;
justify-content: space-between;
}
.section-content {
display: inline-block;
}
</style>
</head>
<body>
<main>
<section>
<div class = "flex-container">
<div>
<p>Some sample text in original font size.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</div>
</section>
<section>
<div class = "section-content">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum magni eligendi
officia velit corporis dolorum reiciendis autem aperiam veniam, voluptatum illum
cum est. Accusamus deleniti numquam corporis mollitia libero tempora?
</p>
</div>
</section>
</main>
</body>
</html>
и выход
Вы пробовали без —webkit? И что происходит в наборе контейнеров меньшей ширины?