html - 如何根据视口(viewport)高度修复 div 的高度？

Question

我的网页移动版有问题。正如您在下面的代码中看到的，我将这两个 div 设置为在网页加载时占据视口(viewport)高度的 100%。它在台式机上完美运行，但在移动设备(或至少我的手机 - 我有三星 Galaxy S5)上屏幕似乎跳动，因为三星互联网有一个菜单，当您向下滚动一点时会折叠。这导致我的两个 div 自动填充新的可用视口(viewport)空间，因此“跳跃”。

我的问题是，是否有人知道如何在更改之前将两个 div 锁定到初始视口(viewport)高度？

#welcome-section{
    top: 0;
    color: white;
    height: 94vh;
    background-image: var(--stars-background);
    background-size: 1080px 960px;
}
#navbar {
    z-index: 3;
    background-color: black;
    margin: 0;
    padding: 0;
    top: 0;
    width: 100%;
    height: 6vh;
    position: -webkit-sticky;
    position: sticky;
}

Answer 1

JQuery 就是答案!

$(document).ready(function(){
                var vheight = $(window).innerHeight();
            vheight = vheight * 0.94;
            $("#welcome-section").height(vheight);
        });

此函数在网页加载时获取初始视口(viewport)高度，并将我的 div 设置为该高度的 94%，因为我也想在视口(viewport)中包含导航栏。停止所有的跳跃。

哦，为了清楚起见，这就是我所说的设备视口(viewport)变化的意思:

如您所见，互联网应用程序中有一个菜单会影响视口(viewport)大小。

当您向下滚动时，菜单会折叠，从而改变视口(viewport)大小。这导致了我所说的“跳跃”。