如何根据视口高度确定div的高度？

Question

我的网页的移动版本有问题。如您在下面的代码中看到的，我将这两个div设置为在加载网页时占据视口高度的100％。它可以完美地在台式机上运行，​​但是在移动设备（或至少我的手机-我有三星Galaxy S5）上，屏幕似乎跳动，因为三星Internet的菜单在向下滚动时会折叠。这使我的两个div自动填充了新可用的视口空间，因此会“跳转”。

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

#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);
        });

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

哦，为清楚起见，这就是设备视口改变的意思：

如您所见，Internet应用程序上有一个菜单会影响视口的大小。

当您向下滚动时，菜单会折叠，从而更改视口大小。这引起了我所谈论的“跳跃”。

Answer 2

这些是大多数高清手机所需要的：

@media (min-width: 480px) and (max-width:767px) {}

非高清手机：

@media (max-width: 479px) {}