如何在手机上修复网站的自动高度显示

Question

我有这个网站，看起来像我希望它在桌面上看起来像。当我在控制台中查看网站（例如，检查响应性）时，网站看起来很好。但是，当我将更改上传到AWS并在我的手机上查看网站时，vh和flexbox的工作方式并不像我期望的那样。

在桌面上查看网站并转到控制台。从控制台更改切换设备工具栏并将视图更改为任何电话。它按预期工作。但是，然后在手机上查看网站。您在控制台上观看的内容不是您在自己的手机上看到的内容。

我想在一个屏幕上显示导航栏，问题，聊天框和输入框。现在，用户必须滚动聊天才能到达输入框。一旦他们到达输入框，他们就看不到导航栏或问题了。

我正在尝试遵循本指南

但我还在苦苦挣扎。不确定是否有人可以访问我的网站，看看导致问题的原因。

我有太多的代码可以让我在这里磨练这个问题

我摆脱了所有身高：100％css风格。我的身高很少：?? px css风格。所有100：vh属性都正确实现（我相信）以及display：flex属性。如果有人可以提供帮助，那就太棒了。

下面是移动设备在Web控制台中的外观（这就是我想要的）

当你在手机上访问网站时，看看它的外观（例如）。（这是我不想要的）

编辑有人可以删除这篇文章吗？

我使用display：flex和flex：1修正了正确的div。（我错过了一些）

Answer 1

我会评论，但我没有评论privalages。我确实想帮忙。

您是否在HTML的顶部添加了以下行？

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

希望这可以帮助。祝这个项目好运！

Answer 2

尝试将height: 100vh;更改为height: 100%;。我希望它能解决你的问题。谢谢

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