javascript 在JS中获取Android Chrome浏览器地址栏高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/50990006/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get Android Chrome Browser Address bar height in JS
提问by Erando
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.
如何在Android Chrome浏览器中的JavaScript中获取地址栏的高度（左图中红色矩形标记）？我需要知道它在向下滚动时消失，我需要对此做出反应，因为视口高度不同。
One solution I already figured out:
我已经想到的一种解决方案：
Get viewport height at initial state:
var height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);Get viewport height when the address bar has disappeared
Compute difference between both values
获取初始状态的视口高度：
var height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);当地址栏消失时获取视口高度
计算两个值之间的差异
Problem is that you have to be in the second state to know that.
问题是你必须处于第二种状态才能知道这一点。
采纳答案by Erando
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;
}
});
回答by Sunchock
The thing you're are looking for is url bar resizing. Since Android's chrome v56, it's recommended by David Bokan to use vh uniton mobile. There is a demo in that article, clicks the link to get more informations and how to use it on mobile.
您正在寻找的是url bar resizing。由于 Android 的 chrome v56，David Bokan 建议在移动设备上使用vh 单元。那篇文章中有一个演示，单击链接以获取更多信息以及如何在移动设备上使用它。
When the user is scrolling down the page, a window.resize eventis throwed. You could update your page by catching this event with an event listener.
当用户向下滚动页面时，会引发window.resize 事件。您可以通过使用事件侦听器捕获此事件来更新您的页面。
More informations : mobile chrome fires resize event on scroll
回答by Qiong Wu
Had the same issue today, turns out there is no easy way to figure out the height of the url bar directly. As far as I know, none of the directly accessible variables in javascript can tell you how much the size of "100vh" really is.
今天遇到了同样的问题，事实证明没有简单的方法可以直接计算出 url 栏的高度。据我所知，javascript 中没有一个可直接访问的变量可以告诉您“100vh”的大小到底有多大。
On mobile browsers, 100vh may or may not include the height of the url bar, which leaves us in a tricky situation, if we want to size a div to the exact height of the visible content area of the browser during load.
在移动浏览器上，100vh 可能包含也可能不包含 url 栏的高度，如果我们想在加载期间将 div 的大小调整为浏览器可见内容区域的确切高度，这会让我们陷入困境。
I figured out a workaround though that worked pretty neat for me, here's what I did:
我想出了一个解决方法，尽管它对我来说非常有效，这就是我所做的：
- add a dummy property on your html root element with a size of 100vh. In my case, i used the "perspective" attribute, which worked for me
then you can get the address bar size with the following code:
var addressBarSize = parseFloat(getComputedStyle(document.documentElement).perspective) - document.documentElement.clientHeight
- 在 html 根元素上添加一个大小为 100vh 的虚拟属性。就我而言，我使用了对我有用的“透视”属性
然后您可以使用以下代码获取地址栏大小：
var addressBarSize = parseFloat(getComputedStyle(document.documentElement).perspective) - document.documentElement.clientHeight
回答by Filip Marzec
I had a container with dynamic content that had to always have at least viewport's full height (and be scrollable if the content doesnt fit on the screen).
我有一个包含动态内容的容器，它必须始终至少具有视口的全高（如果内容不适合屏幕，则可以滚动）。
So if you need a fixed height, just replace "min-height" with "height" in my solution.
因此，如果您需要固定高度，只需在我的解决方案中将“min-height”替换为“height”即可。
That's how I dealt with it.
我就是这样处理的。
// 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`);
});
It works for android's address bar and also safari's bars (in safari mobile there can be top and the bottom bar aswell).
它适用于 android 的地址栏和 safari 的栏（在 safari mobile 中也可以有顶部和底部栏）。
Then to make the transition smooth, you can apply a css rule:
然后为了使过渡平滑，您可以应用 css 规则：
.content-container{
transition: min-height 500ms ease;
}
