Question

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

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

除了移动Safari之外，它在每个浏览器中都可以正常工作。

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

但不久之后，顶级浏览器镀铬消失了（尽管底部按钮栏仍然存在）。

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

如何找到并补偿浏览器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

添加事件监听器 - 当浏览器chrome消失时：将地图高度设置为窗口高度+浏览器镶边高度

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

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

Answer 2

我认为我已经找到了一种如何在iOS Mobile Safari上获得适当窗口高度的方法，请查看我对类似问题的回答 - jQuery/JS, iOS 4 and $(document).height() problems

Answer 3

您应该只使用window.innerHeight属性。这将为您提供不含铬的窗口的可用高度。

另外，如果您从未查看某个window.screen对象，这将为您提供其他有用的属性。

示例：

window.screen

Screen {
    availHeight: 1200,
    availLeft: 1680,
    availTop: 0,
    availWidth: 1920,
    colorDepth: 24,
    height: 1200,
    pixelDepth: 24,
    width: 1920
}

window.innerHeight

所以你可以清楚地看到浏览器chrome上的chrome占用了284px。

var browserChrome = (window.screen.height - window.innerHeight);

找到移动Safari chrome的高度？

3 个答案: