瀏覽器大小（寬度和高度）

我試圖檢測瀏覽器的當前大小（寬度和高度）。我知道在jQuery中使用$(document).width and $(document).height非常容易，但我不想將jQuery lib的大小添加到項目中，所以我寧願使用內置的JavaScript。用JavaScript做同樣的事情的簡短有效的方法是什麼？瀏覽器大小（寬度和高度）

來源

2010-03-18 dono

在這已經回答了相當不錯：http://stackoverflow.com/questions/1766861/find-the-exact-height-and-width-of-the -viewport-in-a-cross-browser-way-no-protot – vsync 2010-03-23 14:32:29

// first get the size from the window 
// if that didn't work, get it from the body 
var size = { 
    width: window.innerWidth || document.body.clientWidth, 
    height: window.innerHeight || document.body.clientHeight 
}

來源

2010-03-19 00:10:49 Joel

機身尺寸與實際需要的尺寸不一樣。 – vsync 2010-03-23 14:29:04

這可以使用短路操作員進行優化。例如：'width：window。innerWidth || document.body.clientWidth' – 2010-03-23 14:36:28

@vsync，這是真的，但窗口大小沒有被所有瀏覽器定義。 @彼得，好點。我會更新它。 – Joel 2010-03-23 14:45:40

試試這個;

<script type="text/javascript"> 
winwidth=document.all?document.body.clientWidth:window.innerWidth; 
winHeight=document.all?document.body.clientHeight:window.innerHeight; 
alert(winwidth+","+winHeight); 
</script>

來源

2010-03-18 23:24:00 Enrique

你不應該像'document.all'那樣使用瀏覽器檢查，而應該檢查clientWidth是否未定義。 – Joel 2010-03-18 23:27:18

@Joel，爲什麼不，請你提供你的答案。謝謝 – dono 2010-03-18 23:47:39

僅僅因爲瀏覽器執行或不執行'document.all'並不意味着它執行或不執行'document.body.clientHeight'。你應該檢查你想要的財產，而不是無關的財產。 – Joel 2010-03-19 00:04:33

function getWindowSize(){ 
var d= document, root= d.documentElement, body= d.body; 
var wid= window.innerWidth || root.clientWidth || body.clientWidth, 
hi= window.innerHeight || root.clientHeight || body.clientHeight ; 
return [wid,hi] 
}

IE瀏覽器是誰不使用innerHeight和寬度的唯一部分。

但是沒有標準的瀏覽器實現。

在檢查主體之前測試html（document.documentElement）clientHeight- 如果它不是0，它是'視口'的高度，body.clientHeight是主體的高度 - 可以更大或小於窗戶。

向後模式爲根元素返回0，並從正文中返回窗口（視口）高度。

與寬度相同。

來源

2010-03-19 02:41:57 kennebec

我的案例使用window.innerWidth涉及建立一個自定義模態彈出窗口。簡單地說，用戶點擊按鈕，彈出窗口在瀏覽器中居中打開，彈出後面有一個透明的黑色背景。我的問題是找到瀏覽器的寬度和高度來創建透明bkgd。

window.innerWidth很好地發現寬度，但記住window.innerWidth and window.innerHeight不補償滾動條，所以如果你的內容超出了可見內容區域。我不得不從該值中減去17px。

transBkgd.style.width = (window.innerWidth - 17) + "px";

由於該網站的內容總是超出了可見高度，因此我無法使用window.innerHeight。如果用戶向下滾動透明背景，那麼會在該點結束，看起來很骯髒。爲了保持透明bkgd一直到我使用的內容的底部document.body.clientHeight。

transBkgd.style.height = document.body.clientHeight + "px";

我測試了IE，FF，Chrome中的彈出窗口，它看起來很好。我知道這並不太符合原來的問題，但我認爲這可能會有所幫助，如果有人在創建自定義模式彈出窗口時遇到同樣的問題。

來源

2012-07-12 20:52:31

下面是一個代碼示例

function getSize(){ 

var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; 

var h=window.innerHeight || document.documentElement.clientHeight ||document.body.clientHeight; 


}

來源

2013-04-14 06:16:49

瀏覽器大小（寬度和高度）

回答

相關問題