更新-动态单位

不是直接解决浏览器栏高度，而是解决适应新尺寸的问题。
您可以使用动态视口单位-dvh
动态视口百分比单位（dv*）是相对于动态视口大小定义的：视口的大小动态考虑了任何动态扩展和收缩的UA接口。这允许作者调整内容的大小，以便它可以完全适合视口，无论这些接口是否存在。（来源）

原始答案- JavaScript

因为100vh will be larger than the visible height when the URL bar is shown根据this
你可以通过创建一个宽度为0，高度为100 vh的元素来计算URL栏的高度。

<div id="control-height"></div>

#control-height {
    height: 100vh;
    width: 0;
    position: absolute;
}

然后使用JavaScript将window.innerHeight与该元素的高度进行比较。

const visibleHeight = window.innerHeight;
const fullHeight = document.querySelector('#control-height').clientHeight;

const barHeight = fullHeight - visibleHeight;

型

你正在寻找的东西是url bar resizing .由于Android的Chrome v56，它的建议由大卫Bokan使用vh单位在移动的.有一个演示在那篇文章，点击链接以获得更多信息以及如何在移动的使用它.
当用户向下滚动页面时，会抛出一个window.resize事件。您可以通过事件侦听器捕获此事件来更新页面。
更多信息：mobile chrome fires resize event on scroll

对我来说，最好的方法就是这样：

$(document).ready(function(){   

var viewportHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
var viewportWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var isPortrait = viewportHeight > viewportWidth;

$( window ).resize(onresize);

function onresize() {
        var newViewportHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
        var newViewportWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
        var hasOrientationChanged = (newViewportHeight > newViewportWidth) != isPortrait;
        var addressbarHeight = 130;

        if (!hasOrientationChanged && (newViewportHeight != viewportHeight)) {
            addressbarHeight = Math.abs(newViewportHeight - viewportHeight);
            if (newViewportHeight < viewportHeight) {
                // Android Chrome address bar has appeared
            } else {
                // Android Chrome address bar has disappeared
            }
        } else if(hasOrientationChanged) {
            // Orientation change
        }

        viewportHeight = newViewportHeight;
        viewportWidth = newViewportWidth;
        isPortrait = viewportHeight > viewportWidth;
}
});

字符串

今天也遇到了同样的问题，事实证明没有简单的方法可以直接计算出url栏的高度。据我所知，JavaScript中没有一个可直接访问的变量可以告诉你“100vh”的大小到底是多少。
在移动的浏览器上，100 vh可能包括也可能不包括url栏的高度，这让我们处于一个棘手的境地，如果我们想在加载过程中将div的大小调整到浏览器可见内容区域的精确高度。
我想出了一个变通办法，虽然这对我来说很整洁，这就是我所做的：
1.在html根元素上添加一个大小为100vh的伪属性。在我的例子中，我使用了“perspective”属性，这对我很有效
1.然后你可以用下面的代码得到地址栏的大小：

var addressBarSize = parseFloat(getComputedStyle(document.documentElement).perspective) - document.documentElement.clientHeight

字符串

我有一个包含动态内容的容器，它必须始终至少具有viewport的全高（如果内容不适合屏幕，则可以滚动）。
因此，如果你需要一个固定的高度，只需在我的解决方案中将“min-height”替换为“height”。
我就是这么处理的。

// calculate min-height on init
$(".content-container").css("min-height", `${window.innerHeight}px`);

// recalculate the min-height everytime the bar appears or disappears
$(window).resize(() => {
    $(".content-container").css("min-height", `${window.innerHeight}px`);
});

字符串
它适用于android的地址栏和safari的地址栏（safari移动的也有顶部和底部的地址栏）。
然后，为了使过渡平滑，你可以应用一个css规则：

.content-container{
    transition: min-height 500ms ease;
}

型