Question

如何在Android的Chrome浏览器中获取JavaScript中地址栏的高度（在左侧图片中用红色矩形标记）？我需要知道当向下滚动时它消失了，我需要对此做出反应，因为视口的高度与那时不同。

我已经想出的一种解决方案：

获取初始状态下的视口高度： var height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
在地址栏消失后获取视口高度
计算两个值之间的差异

问题是您必须处于第二种状态才能知道。

Answer 1

您正在寻找的东西是url bar resizing。自Android chrome v56起，David Bokan建议在移动设备上使用 vh单位。该文章中有一个演示，单击链接以获取更多信息以及如何在移动设备上使用它。

当用户向下滚动页面时，会抛出 window.resize事件。您可以通过使用事件监听器捕获此事件来更新页面。

更多信息：mobile chrome fires resize event on scroll

Answer 2

因为onNewToken。根据{{3}}。

您可以通过创建高度为100vh的0宽度元素来计算网址栏的高度。

100vh will be larger than the visible height when the URL bar is shown

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

然后使用javascript将#control-height { height: 100vh; width: 0; position: absolute; }与该元素的高度进行比较。

window.innerHeight

Answer 3

对我来说最好的方法是拥有这样的东西：

$(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;
}
});

Answer 4

今天有同样的问题，事实证明，没有简单的方法可以直接计算出网址栏的高度。据我所知，javascript中没有任何可直接访问的变量可以告诉您“ 100vh”的大小实际上是多少。

在移动浏览器上，如果要在加载过程中将div的大小调整为浏览器可见内容区域的确切高度，则100vh可能包含或不包含网址栏的高度，这使我们处于棘手的情况。

我想出了一种解决方法，尽管对我来说很整洁，这就是我所做的：

在html根元素上添加100vh大小的虚拟属性。就我而言，我使用了对我有用的“视角”属性

然后您可以使用以下代码获取地址栏大小：

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

Answer 5

我有一个包含动态内容的容器，该容器必须始终至少具有视口的完整高度（如果内容不适合屏幕，则可以滚动）。

因此，如果您需要固定的高度，只需在我的解决方案中将“最小高度”替换为“高度”即可。

这就是我的处理方式。

// 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 mobile中也可以有顶部和底部的栏）。

然后，为了使过渡平滑，可以应用css规则：

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

在JS中获取Android Chrome浏览器地址栏的高度

5 个答案: