Как сделать минимальную высоту HTML-страницы равной высоте экрана мобильного устройства?

Question

[Trigonometric]

Ширина BODY - 1200px. Нужно сделать так, чтобы документ на мобильных устройствах имел нулевой масштаб и имел минимальную высоту по размеру эерана. На мобильниках браузер страницу масштабирует и все летит к черту. Как быть?
Вот весь код:

Вот так выглядет на десктопе, все ок:

А так на мобильниках:

Comments

[Иван]

https://developer.mozilla.org/ru/docs/Mozilla/Mobi...

Answer 1

[Игорь Забродин]

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

initial-scale - масштабирование при загрузке страницы
maximum-scale - максимальный масштаб
user-scalable=no - запретить масштабирование
В большинстве случаев используется вариант

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

Если устроит поддержка (Android от 4.4), то можно все что внутри body обернуть wrapper'ом с display: flex, flex-direction: column, а #content задать flex-grow: 1. Но мета тег обязателен.