获取Android Chrome浏览器JS地址栏高度
获取Android Chrome浏览器JS地址栏高度
提问于 2018-06-22 22:20:06
如何在安卓浏览器中获取JavaScript中地址栏的高度(左图用红色矩形标记)？我需要知道，当它消失时，向下滚动，我需要对此作出反应，因为视口的高度是不同的。
我已经想出了一个解决方案：
在初始状态下获取视区高度:当地址栏有两个值之间的差异时，获取视区高度disappeared
- Compute
问题是，你必须处于第二状态才能知道这一点。
回答 5
Stack Overflow用户
回答已采纳
发布于 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;
}
});Stack Overflow用户
发布于 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;Stack Overflow用户
发布于 2018-06-22 23:15:49
你要找的东西是url bar resizing。由于安卓的chrome v56，David Bokan推荐在移动设备上使用vh单元。在那篇文章中有一个演示，点击链接获取更多信息以及如何在移动设备上使用它。
当用户向下滚动页面时，将抛出window.resize event。您可以通过使用事件侦听器捕获此事件来更新页面。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50990006
复制相关文章
相似问题