在JS中获取Android Chrome浏览器地址栏高度 [英] Get Android Chrome Browser Address bar height in JS

问题描述

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

How do I get the height of the address bar in JavaScript in the Chrome browser for Android (marked by red rectangle in left picture)? I need to know that as it disappears while scrolling down and I need to react to that because the viewport height is different then.

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

One solution I already figured out:

1. 获取初始状态下的视口高度：
   var height = Math.max（document.documentElement.clientHeight，window.innerHeight || 0）;

地址栏消失后获取视口高度

Get viewport height when the address bar has disappeared

计算两个值之间的差异

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

Problem is that you have to be in the second state to know that.

推荐答案

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

Best approach for me was to have something like that:

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

这篇关于在JS中获取Android Chrome浏览器地址栏高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！