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

【问题标题】：Get Android Chrome Browser Address bar height in JS在JS中获取Android Chrome浏览器地址栏高度
【发布时间】：2018-12-02 01:17:18
【问题描述】：

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

我已经想出了一个解决方案：

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

问题是你必须处于第二种状态才能知道这一点。

【问题讨论】：

你想用这个做什么？如果您的布局取决于屏幕的高度，您可能会遇到具有不同比例的手机的问题。您是否有理由不能使用响应式高度？
这是一个非常具体的情况，在这里详细介绍太复杂了。这也与问题无关。如果我们能专注于我的那个直截了当的问题，那就太好了，谢谢！
也许这对你有帮助？ stackoverflow.com/questions/18137690/…

标签： javascript html css google-chrome android-chrome

【解决方案1】：

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

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

【讨论】：

谢谢！这很有趣，即使它不是我的问题的答案，因为我需要用position: fixed; 对元素做出反应。无论如何，非常感谢！
@Erando 很抱歉不能再提供帮助了，很高兴你有兴趣 :)

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

今天遇到了同样的问题，原来没有简单的方法可以直接计算出 url 栏的高度。据我所知，javascript 中没有一个可直接访问的变量可以告诉您“100vh”的实际大小。

在移动浏览器上，100vh 可能包括也可能不包括 url 栏的高度，如果我们想在加载期间将 div 的大小调整为浏览器可见内容区域的确切高度，这让我们陷入了一个棘手的境地。

我想出了一个解决方法，虽然它对我来说非常好用，我就是这样做的：

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

那么你可以通过以下代码获取地址栏大小：

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

【讨论】：

【解决方案4】：

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

因此，如果您需要固定高度，只需在我的解决方案中将“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 mobile 中也可以有顶部和底部栏）。

那么为了让过渡平滑，你可以应用一个css规则：

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

【讨论】：

【解决方案5】：

因为100vh will be larger than the visible height when the URL bar is shown。根据this.

您可以通过创建一个高度为 100vh 的 0-width 元素来计算 URL 栏的高度。

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

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

然后使用javascript比较window.innerHeight与这个元素的高度。

const actualHeight = window.innerHeight;
const elementHeight = document.getElementById('control-height').clientHeight;

const barHeight = elementHeight - actualHeight;

【讨论】：