如何在安卓浏览器中获取JavaScript中地址栏的高度(左图用红色矩形标记)?我需要知道,当它消失时,向下滚动,我需要对此作出反应,因为视口的高度是不同的。
我已经想出了一个解决方案:
在初始状态下获取视区高度:当地址栏有两个值之间的差异时,获取视区高度disappeared
问题是,你必须处于第二状态才能知道这一点。
发布于 2018-07-04 23:07:08
对我来说,最好的方法是拥有这样的东西:
$(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;
}
});
发布于 2020-11-15 01:45:43
因为100vh will be larger than the visible height when the URL bar is shown
。根据this的说法。
您可以通过创建一个高度为100vh的0宽元素来计算地址栏的高度。
<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;
发布于 2018-06-22 23:15:49
你要找的东西是url bar resizing。由于安卓的chrome v56,David Bokan推荐在移动设备上使用vh单元。在那篇文章中有一个演示,点击链接获取更多信息以及如何在移动设备上使用它。
当用户向下滚动页面时,将抛出window.resize event。您可以通过使用事件侦听器捕获此事件来更新页面。
https://stackoverflow.com/questions/50990006
复制相似问题