摘要:?由于瀏覽器的差異，許多信息的獲取都要考慮兼容性，窗口中文檔可用尺寸是一個經常需要用到的信息，由于瀏覽器不同甚至版本不同，獲取的方法也不一樣，本文介紹的函數能夠兼容各種瀏覽器，獲取這一信息。同時，文章中對瀏覽器處理這一信息的差異也做了詳細說明。 歸類:?Javascript,

關鍵詞:?window,?文檔,?offsetHeight,?clientHeight,?innerHeight,?視口,?窗口,

收藏本頁到： 由于瀏覽器的差異，許多信息的獲取都要考慮兼容性，窗口中文檔可用尺寸是一個經常需要用到的信息，由于瀏覽器不同甚至版本不同，獲取的方法也不一樣，本文介紹的函數能夠兼容各種瀏覽器，獲取這一信息。同時，文章中對瀏覽器處理這一信息的差異也做了詳細說明。


--------------------------------------------------------------
點此瀏覽示例文件
--------------------------------------------------------------?


本文所說的“瀏覽器窗口中文檔（下面簡稱“視口”）可用尺寸”指瀏覽器中文檔顯示區域的尺寸，不包括標題欄、工具欄、滾動條等內容。

在處理這一信息時，不同瀏覽器和同一瀏覽器不同版本中有一些差別，說明如下：

（1）在?IE4、IE5?和?沒有聲明?DOCTYPE?的?IE6?中，視口的這一信息保存在“body”元素中，可以用?document.body.offsetWidth?/?offsetHeight?獲取，

（2）在聲明了DOCTYPE?的?IE6?中?，視口的這一信息保存在?document.documentElement?中，可以用?document.documentElement.clientWidth?/?clientHeight?獲取。

（3）除了?IE?以外的所有瀏覽器都將此信息保存在?window?對象中，可以用?window.innerWidth?/?innerHeight?獲取。


因此，綜合上面的說明，我們可以用下面的方式獲取瀏覽器窗口中文檔（視口）可用尺寸：

Javascript:

<script type="text/javascript">

// 說明：Javascript 獲取瀏覽器窗口中文檔（視口）可用尺寸的方法

// 整理：http://www.CodeBit.cn

function getViewportInfo()

{

var w = (window.innerWidth) ? window.innerWidth : (document.documentElement && document.documentElement.clientWidth) ? document.documentElement.clientWidth : document.body.offsetWidth;

var h = (window.innerHeight) ? window.innerHeight : (document.documentElement && document.documentElement.clientHeight) ? document.documentElement.clientHeight : document.body.offsetHeight;

return {w:w,h:h};

};

</script>

注意！這一信息的獲取時臨時的，當瀏覽器窗口本身大小被改變時，此信息也將跟隨改變！

總結

以上是生活随笔為你收集整理的Javascript 获取浏览器窗口中文档（视口）可用尺寸的方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。