Мне кажется, что Chrome (в отличие от, например, Firefox) автоматически уменьшает определенное html -контент при использовании мобильного представления инструментов разработчика:
Возьмем этот минимальный пример:
<html>
<head>
<style>
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
font-size: 40px;
}
.test {
background-color: lime;
height: 100px;
padding: 20px;
}
</style>
</head>
<body>
<div class="test">Test Test Test</div>
</body>
</html>
Для меня при переходе в мобильное представление размер и размер шрифта зеленых элементов масштабируются относительно ширины окна. Тем не менее, я ожидаю, что он будет иметь постоянную высоту 100px. В обычном представлении все как и ожидалось, без масштабирования.
Я записал это поведение в этом GIF: Chrome Изменение размера
Есть ли у меня фундаментальное недопонимание css или это особенное поведение Chrome? Как мне создать div постоянной высоты, чтобы я мог работать с ними в Chrome? Спасибо!