html - 如何修复手机网站的自动高度显示

Question

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

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

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

我正在尝试遵循本指南

Chrome / Safari not filling 100% height of flex parent

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

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

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

这是移动设备在网络控制台中的样子(这是我想要的)

这是您使用手机访问该网站时的样子(作为示例)。 (这是我不想要的)

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

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

Answer 1

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

您是否已将以下行添加到 HTML 的顶部？

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

希望这对您有所帮助。祝元素顺利!