Как исправить автоматическое отображение высоты для веб-сайта на мобильном телефоне

Question

У меня есть этот сайт, который выглядит так, как я хочу, чтобы он выглядел на рабочем столе. Когда я просматриваю сайт в консоли (например, проверяю отзывчивость), сайт выглядит нормально. Но когда я загружаю изменения в AWS и просматриваю веб-сайт на своем телефоне, vh и flexbox не работают так, как я ожидаю.

Просмотр веб-сайта на рабочем столе и переход к консоли. Из консоли смените панель инструментов устройства и измените ее вид на любой из телефонов. Работает как задумано. Но затем проверьте веб-сайт на вашем телефоне. То, что вы просматриваете на консоли, - это не то, что вы видите на своем телефоне.

Мне бы хотелось, чтобы навигационная панель, вопрос, окно чата и поле ввода находились на одном экране. Прямо сейчас использование должно прокрутить чат, чтобы добраться до поля ввода. Как только они достигают поля ввода, они не могут видеть панель навигации или вопрос.

Я пытаюсь следовать этому руководству

Chrome / Safari не заполняет 100% высоты гибкого родителя

Но я все еще борюсь. Не уверен, что кто-нибудь может зайти на мой сайт и посмотреть, что является причиной проблемы.

Слишком много кода, чтобы я мог его здесь поставить, чтобы решить проблему

Я избавился от ВСЕХ высот: 100% стилей CSS. У меня очень мало высоты: Все атрибуты 100: vh правильно реализованы (я считаю), а также свойства display: flex. Если кто-то может помочь, это было бы замечательно.

Вот как выглядит мобильный телефон в веб-консоли (именно этого я и хочу)

Вот как это выглядит (в качестве примера), когда вы заходите на сайт в своем мобильном телефоне. (Что я НЕ хочу)

РЕДАКТИРОВАТЬ Кто-нибудь может удалить это сообщение?

Я исправил это с помощью display: flex и flex: 1 в правильных делениях. (Я пропустил несколько)

Answer 1

Попробуйте изменить height: 100vh; на height: 100%;. Я надеюсь, что это решит вашу проблему. Спасибо

body, html {
    height: 100%;
    margin: 0;
    padding: 0;
}

Answer 2

Я бы прокомментировал, но у меня нет комментариев. Я хочу помочь.

Вы добавили следующую строку в начало своего HTML-кода?

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

Надеюсь, это поможет. Желаем удачи в проекте!