.jpg)
獲取瀏覽器窗口大小的方法主要有四種，適用于不同場(chǎng)景。1.window.innerwidth 和 innerheight 兼容性好，適用于大多數(shù)情況；2.document.documentelement.clientwidth 和 clientheight 用于標(biāo)準(zhǔn)模式；3.document.body.clientwidth 和 clientheight 用于怪異模式；4.screen.width 和 screen.height 獲取屏幕分辨率，較少使用。在移動(dòng)端，window.innerwidth 可能受虛擬鍵盤影響，可通過(guò)監(jiān)聽 resize 事件并重新計(jì)算窗口大小來(lái)解決。document.documentelement 指的是標(biāo)簽，在標(biāo)準(zhǔn)模式下使用；document.body 指的是
標(biāo)簽，在怪異模式下使用。為兼容性考慮，可結(jié)合兩者獲取窗口大小。頻繁觸發(fā) resize 事件可通過(guò)防抖或節(jié)流技術(shù)優(yōu)化性能，防抖適合延遲執(zhí)行，節(jié)流適合固定間隔執(zhí)行。
獲取瀏覽器窗口大小，簡(jiǎn)單來(lái)說(shuō)，就是拿到瀏覽器可視區(qū)域的寬度和高度。這在前端開發(fā)中非常常見(jiàn)，比如響應(yīng)式布局、動(dòng)態(tài)調(diào)整元素大小等等。
獲取瀏覽器窗口大小的方法主要有以下幾種，各有特點(diǎn)，適用場(chǎng)景也略有不同：
// 方法一：使用 window.innerWidth 和 window.innerHeight (兼容性好) const width = window.innerWidth; const height = window.innerHeight; // 方法二：使用 document.documentElement.clientWidth 和 document.documentElement.clientHeight (標(biāo)準(zhǔn)模式) const width = document.documentElement.clientWidth; const height = document.documentElement.clientHeight; // 方法三：使用 document.body.clientWidth 和 document.body.clientHeight (怪異模式) const width = document.body.clientWidth; const height = document.body.clientHeight; // 方法四：使用 screen.width 和 screen.height (獲取屏幕分辨率，不常用) const width = screen.width; const height = screen.height;
解決方案
具體選擇哪種方法，取決于你的需求和兼容性考慮。通常情況下，window.innerWidth 和 window.innerHeight 已經(jīng)足夠滿足大部分場(chǎng)景，而且兼容性也非常好。如果需要兼容一些老舊瀏覽器，可以考慮結(jié)合 document.documentElement.clientWidth 和 document.body.clientWidth 來(lái)處理。
為什么window.innerWidth在移動(dòng)端有時(shí)不準(zhǔn)確？
在移動(dòng)端，尤其是ios設(shè)備上，window.innerWidth 可能會(huì)受到虛擬鍵盤的影響。當(dāng)虛擬鍵盤彈出時(shí)，window.innerWidth 的值可能會(huì)減小，因?yàn)闉g覽器認(rèn)為可視區(qū)域變小了。解決這個(gè)問(wèn)題，可以考慮監(jiān)聽 resize 事件，并在事件處理函數(shù)中重新計(jì)算窗口大小。
window.addEventListener('resize', () => { const width = window.innerWidth; const height = window.innerHeight; console.log(`窗口大小改變：寬度 ${width}，高度 ${height}`); });
另外，某些移動(dòng)瀏覽器可能會(huì)存在一些特殊的行為，例如在地址欄隱藏或顯示時(shí)，window.innerWidth 的值也會(huì)發(fā)生變化。因此，在處理移動(dòng)端窗口大小問(wèn)題時(shí)，需要進(jìn)行充分的測(cè)試和兼容性處理。
document.documentElement 和 document.body 的區(qū)別是什么？什么時(shí)候使用它們？
document.documentElement 指的是文檔的根元素，也就是 標(biāo)簽。而 document.body 指的是
標(biāo)簽。
在標(biāo)準(zhǔn)模式下（也就是文檔聲明 存在的情況下），document.documentElement.clientWidth 和 document.documentElement.clientHeight 能夠正確獲取瀏覽器窗口的大小。
而在怪異模式下（文檔聲明缺失或不正確的情況下），document.body.clientWidth 和 document.body.clientHeight 才能正確獲取瀏覽器窗口的大小。
因此，為了保證兼容性，通常會(huì)結(jié)合這兩種方式來(lái)獲取窗口大小：
function getWindowWidth() { return window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; } function getWindowHeight() { return window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; } const width = getWindowWidth(); const height = getWindowHeight();
如何避免頻繁觸發(fā) resize 事件？
監(jiān)聽 resize 事件雖然可以實(shí)時(shí)獲取窗口大小的變化，但如果窗口大小變化過(guò)于頻繁，會(huì)導(dǎo)致 resize 事件處理函數(shù)被頻繁調(diào)用，影響性能。
為了避免這種情況，可以使用 防抖（debounce） 或 節(jié)流（throttle） 技術(shù)。
防抖 是指在事件被觸發(fā)后，延遲一段時(shí)間后再執(zhí)行事件處理函數(shù)。如果在延遲時(shí)間內(nèi)再次觸發(fā)該事件，則重新計(jì)時(shí)。也就是說(shuō)，只有在事件停止觸發(fā)一段時(shí)間后，才會(huì)執(zhí)行事件處理函數(shù)。
節(jié)流 是指在一段時(shí)間內(nèi)，只允許事件處理函數(shù)執(zhí)行一次。也就是說(shuō)，無(wú)論事件觸發(fā)多么頻繁，都只會(huì)按照固定的時(shí)間間隔執(zhí)行事件處理函數(shù)。
以下是一個(gè)使用防抖的例子：
function debounce(func, delay) { let timeoutId; return function(...args) { clearTimeout(timeoutId); timeoutId = setTimeout(() => { func.apply(this, args); }, delay); }; } const handleResize = () => { const width = window.innerWidth; const height = window.innerHeight; console.log(`窗口大小改變：寬度 ${width}，高度 ${height}`); }; const debouncedHandleResize = debounce(handleResize, 200); // 延遲 200 毫秒 window.addEventListener('resize', debouncedHandleResize);
在這個(gè)例子中，debounce 函數(shù)接受一個(gè)函數(shù)和一個(gè)延遲時(shí)間作為參數(shù)，并返回一個(gè)新的函數(shù)。這個(gè)新的函數(shù)會(huì)在事件被觸發(fā)后，延遲 200 毫秒再執(zhí)行。如果在延遲時(shí)間內(nèi)再次觸發(fā)該事件，則重新計(jì)時(shí)。
通過(guò)使用防抖或節(jié)流技術(shù)，可以有效地減少 resize 事件處理函數(shù)的調(diào)用次數(shù)，提高性能。選擇防抖還是節(jié)流，取決于你的具體需求。如果希望在事件停止觸發(fā)一段時(shí)間后執(zhí)行，則選擇防抖；如果希望按照固定的時(shí)間間隔執(zhí)行，則選擇節(jié)流。
.png)
