html - 如何在移动设备上修复网站的自动高度显示

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

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

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

我正在尝试遵循本指南

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

有太多代码让我放在这里来磨练这个问题

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

这是移动在 Web 控制台中的外观（这是我想要的）

以下是您在手机上访问网站时的外观（例如）。（这是我不想要的）

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

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

标签： htmlcssmobile

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

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

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

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