Question

我有这个网站，看起来就像我希望它在桌面上看起来一样。当我在控制台中查看网站时（例如，检查响应性），网站看起来不错。但是，当我将更改上传到AWS并在手机上查看网站时，vh和flexbox无法正常运行。

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

我想要导航栏，问题和聊天框以及输入框都在一个屏幕上。现在，用户必须滚动聊天才能到达输入框。到达输入框后，他们将看不到导航栏或问题。

我正在尝试遵循本指南

但是我仍然在挣扎。不知道是否有人可以访问我的网站，然后查看导致问题的原因。

对于我来说，这里有太多代码无法磨练

我摆脱了所有高度：100％的CSS样式。我身高很少：px css样式。我相信所有100：vh属性以及display：flex属性都正确实现。如果有人可以帮助，那就太好了。

这里显示了移动设备在Web控制台中的外观（这就是我想要的）

此处显示了您通过手机访问网站时的外观（例如）。（这是我不想要的）

EDIT有人可以删除此帖子吗？

我通过在正确的div中使用display：flex和flex：1来修复它。（我错过了一些）

Answer 1

我会发表评论，但我没有发表评论的特权。我想帮忙。

您是否已将以下行添加到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;
}