1.瀏覽器可視窗口的概述：前端
瀏覽器可視區域不是網頁的body的大小。可視區指的是瀏覽器減去上面菜單欄、工具欄，下面狀態欄和任務欄，右邊滾動條（若是有的話）後的中間網頁內容的單頁面積大小。而body大小是隨着內容調整而變更的，可大可小。若是有滾動條的話，body的要大於可視區瀏覽器
2.不一樣瀏覽器或版本的不一樣寫法： 工具
對於IE9+、Chrome、Firefox、Opera 以及 Safari(window對象屬性不支持IE8及如下瀏覽器):
window.innerHeight - 瀏覽器窗口的內部高度
window.innerWidth - 瀏覽器窗口的內部寬度
對於 Internet Explorer 八、七、六、5：
document.documentElement.clientHeight 表示HTML文檔所在窗口的當前高度（瀏覽器窗口的內部高度）
document.documentElement.clientWidth 表示HTML文檔所在窗口的當前寬度（瀏覽器窗口的內部寬度）
或者 Document對象的body屬性對應HTML文檔的<body>標籤
document.body.clientHeight （body標籤的內部高度）
document.body.clientWidth （body標籤的內部寬度）spa
綜上所述，在不一樣瀏覽器都實用的兼容性JavaScript 方案以下：
var w= window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var h= window.innerHeight || document.documentElement.clientHeight|| document.body.clientHeight;對象
3. 關於兼容性的後二者的理解：ip
3.1 二者對象不一樣（前者是瀏覽器對象，後者是body對象），其結果也不絕對相同
文檔
3.2 在瀏覽器默認的狀況下，body有8-10px左右的邊距，而可見區域包括了這個邊距，所以若是咱們用到body{padding:0;margin:0;}來消除這種默認的狀況。那麼document.body.clientWidth和document.documentElement.clientWidth 的值就會相同。class
獲取更多前端知識，請關注下方二維碼 ↓↓↓↓↓↓兼容性
