找到移動Safari Chrome的高度？

我加載在瀏覽器中的元素，然後調整其大小根據窗口高度：找到移動Safari Chrome的高度？

 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

來源

2011-08-29 Richard

添加事件監聽器 - 當chrome瀏覽器上消失：組地圖高度窗口高度+高度chrome瀏覽器的

你可以使用窗口大小調整事件

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

來源

2011-08-29 20:20:33 Mohsen

我不是100％肯定，此事件在鍍鉻條消失，但在邏輯上應該解僱 – Mohsen

謝謝，但是這並沒有回答這個問題的第一個（也是最重要的）部分：減去的高度瀏覽器鑲邊，如果可見。 – Richard

I認爲我已經找到了一種方法，以便在iOS Mobile Safari上獲得適當的窗口高度，請檢查我對類似問題的回答 - jQuery/JS, iOS 4 and $(document).height() problems

來源

2013-03-30 10:57:34

您應該只使用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瀏覽器的鍍鉻佔用284px。

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

來源

2013-04-04 17:12:31 Newfront

找到移動Safari Chrome的高度？

回答

相關問題