在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:
-
获取初始状态下的视口高度:
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屋!