固定顶部导航栏在移动设备上的顶部被切掉一半

Question

在桌面上，导航栏固定在顶部，滚动时没有问题。然而，当我在手机上打开该网站/使用 chrome devtools 时，导航栏最初加载得很好，直到我开始滚动，这导致导航栏浮动到（看起来）设备的顶部，最终切断了大约 50% 的内容。导航栏。

我首先注释掉我为导航栏编写的一些自定义 CSS，看看是否可以修复它，但它没有。因此，我立即介入并撰写了媒体查询，以了解我认为可能导致该问题的原因。这没有帮助（除了最终让我写出我应该一直写的媒体查询）。然后我发现一个资源说我只需要添加一个偏移/边距顶部来解决问题，但也没有任何作用。

<nav id="navbar-scrollspy" class="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar nav-sm-query">

预期结果：导航栏在移动设备上保持固定在当前视口的顶部

实际结果：导航栏似乎固定在设备顶部，导致导航栏被剪切 30 - 75%

Answer 1

这可能与您的<head>. 尝试将“minimum-scale=1”添加到视口元。

例如，我的视口设置现在如下所示，并且我不再丢失固定位置导航栏的前 50%。

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, user-scalable=no">