css - 查找移动 Safari chrome 的高度？

Question

我正在浏览器中加载一个元素，然后根据窗口高度调整它的大小:

        window_height = $(window).height();
        $("map-canvas").height(window_height);

它在除移动版 Safari 之外的所有浏览器中都可以正常工作。

在移动版 Safari 中，页面以正确的高度加载。

但不久之后，顶部浏览器镶边消失了(尽管底部按钮栏仍然存在)。

发生这种情况时，页面内容会向上移动，但会在底部留下一个大空间，与浏览器 chrome 的高度相同。

如何找到并补偿浏览器 chrome 的高度？

理想情况下我会这样做(伪代码):

if browser chrome is visible:
    subtract height of browser chrome from window height
set map height to window height
add event listener - when browser chrome disappears:
    set map height to window height + height of browser chrome

Answer 1

add event listener - when browser chrome disappears: set map height to window height + height of browser chrome

您可以使用窗口调整大小事件

window.resize = function(){
  document.getElementById('map-canvas').style.height = window.height + 'px';
}