首頁 > 開發者 > JavaScript
標籤：|| 包括 rom 相容 工具 size 相容性 表示 cli
1.瀏覽器可視視窗的概述：
瀏覽器可視地區不是網頁的body的大小。可視區指的是瀏覽器減去上面功能表列、工具列，下面狀態列和工作列，右邊捲軸（如果有的話）後的中間網頁內容的單頁面積大小。而body大小是隨著內容調整而變動的，可大可小。如果有捲軸的話，body的要大於可視區
2.不同瀏覽器或版本的不同寫法：
對於IE9+、Chrome、Firefox、Opera 以及 Safari(window對象屬性不支援IE8及以下瀏覽器):
window.innerHeight - 瀏覽器視窗的內部高度
window.innerWidth - 瀏覽器視窗的內部寬度
對於 Internet Explorer 8、7、6、5：
document.documentElement.clientHeight 表示HTML文檔所在視窗的當前高度（瀏覽器視窗的內部高度）
document.documentElement.clientWidth 表示HTML文檔所在視窗的當前寬度（瀏覽器視窗的內部寬度）
或者 Document對象的body屬性對應HTML文檔的<body>標籤
document.body.clientHeight （body標籤的內部高度）
document.body.clientWidth （body標籤的內部寬度）
綜上所述，在不同瀏覽器都實用的相容性JavaScript 方案如下：
var w= window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var h= window.innerHeight || document.documentElement.clientHeight|| document.body.clientHeight;
3. 關於相容性的後兩者的理解：
3.1 兩者對象不同（前者是瀏覽器對象，後者是body對象），其結果也不絕對相同
3.2 在瀏覽器預設的情況下，body有8-10px左右的邊距，而可見地區包括了這個邊距，因此如果我們用到body{padding:0;margin:0;}來消除這種預設的情況。那麼document.body.clientWidth和document.documentElement.clientWidth 的值就會相同。
JavaScript中關於擷取瀏覽器可視視窗的幾個相容性寫法的理解
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
