確定瀏覽器中的實際查看大小

我想確定當前瀏覽器窗口的實際viewPORT大小。我已經試過：確定瀏覽器中的實際查看大小

window.innerHeight/innerWidth
document.documentElement.clientHeight/clientWidth
document.body.clientHeight/clientWidth

都返回完整的頁面大小，而不是觀看區域。

我試圖最終實現的是迫使彈出式菜單出現在屏幕上（在視口中）。現在，當它顯示時，它可能會顯示在滾動下方，用戶對此不滿意。我知道他們點擊的地方的x，y。我只需要將它與查看區域的大小（與彈出窗口的大小）進行比較，以查看它是否會離開屏幕。

應該指出的是，頁面顯示在IFRAME中，所以如果我需要上一層來獲取正確的值，我可以做到這一點。

來源

2010-06-24 klkitchens

顯然通過轉到父文檔，我能夠得到正確的值。

謝謝！

來源

2010-06-24 18:14:41 klkitchens

嘗試

document.getElementById("").offsetWidth

填寫上面的代碼用不同的元素的ID，請嘗試使用body標籤或包裝DIV。

來源

2010-06-24 15:17:10

Grrr ... nope。希望是那樣。我的顯示器是1900x1200，BodyWidget的offsetWidth報告爲：1903x1308。 1903是正確的，但1308是頁面的大小。 – klkitchens 2010-06-24 15:30:54

window.innerHeight/innerWidth

毫不含糊地不給你視口大小（在這種情況下，你的iframe內的大小），但它不適用於IE 。

document.documentElement.clientHeight/clientWidth

這讓你視口大小，當瀏覽器爲標準模式。通常用作IE的後備。

document.body.clientHeight/clientWidth

這讓你在Quirks mode視口的高度。你不想進入怪癖模式。檢查文檔的<!DOCTYPE。

我只需要比較，爲可視面積

的大小，然後你還必須看document.documentElement.scrollTop/scrollLeft。

來源

2010-06-24 15:31:54 bobince

window.innerHeight給出IFRAME大小......它沒有給出視口大小:(這是在Firefox中。 – klkitchens 2010-06-24 16:28:37

如果你在iframe中，iframe **是你的視口，你不可能顯示如果父文檔是您網站的一部分（同源策略），您可以使用'window.parent'調用它並讓* it *讀取它自己的視口，並在/圍繞/添加元素-top-of-iframe – bobince 2010-06-24 16:37:34

也許我們沒有在術語上溝通對於我（以及我研究過這個問題的其他網站），視口是瀏覽器從頂層菜單到底層狀態的區域bar。當前頁面的實際區域在VIEW中，所以如果瀏覽器全屏在1900x1200，頂部IE/FF/Chrome菜單佔用200px，狀態欄和Windows任務欄再佔用100px，那麼視高度將是900px（1200-200-100）。頁面的高度可以從0px到無限像素。如果它大於900可用，你會看到一個滾動條。 – klkitchens 2010-06-24 16:56:14

確定瀏覽器中的實際查看大小

回答

相關問題