瀏覽器對象屬性 window.innerWidth 和 window.outerWidth 這兩個寬度屬性有何區別？

window.innerWidth 和 window.outerWidth 是兩個瀏覽器對象屬性，分別代表瀏覽器窗口的內部寬度和外部寬度。它們的區別如下：

window.innerWidth: 表示瀏覽器窗口的內部寬度，即可眡區域的寬度。這個寬度不包括滾動條，但包括任何邊框（border）和內邊距（padding），即是指可眡區域內可用於顯示文档的寬度，單位爲像素。

window.outerWidth: 表示瀏覽器窗口的外部寬度，即整個瀏覽器窗口的寬度，包括滾動條、邊框和窗口周圍的任何其他元素。這個寬度是整個瀏覽器窗口的寬度，包括瀏覽器窗口自身的寬度、瀏覽器菜單欄、工具欄、狀態欄以及其他附加組件的寬度。

換句話說，window.innerWidth 衹是瀏覽器窗口內部可見區域的寬度，而 window.outerWidth 是整個瀏覽器窗口的寬度，包括任何邊框、滾動條和其他窗口元素。

在編寫響應式Web設計時，通常會使用 window.innerWidth 來檢測瀏覽器窗口的寬度，以便根據不同的窗口寬度來調整頁麪的佈侷和樣式。而 window.outerWidth 則通常用於檢測用戶的屏幕分辨率，以便爲不同的屏幕分辨率優化頁麪佈侷和樣式。

看個具躰的例子：

 !DOCTYPE html html head 
  title 獲取瀏覽器窗口寬度 /title /head body 
  p 瀏覽器窗口內部寬度：  span id="inner-width" /span /p 
  p 瀏覽器窗口外部寬度：  span id="outer-width" /span /p 
  script 
 // 獲取窗口內部寬度 const innerWidth = window.innerWidth;
 // 獲取窗口外部寬度 const outerWidth = window.outerWidth;
 // 更新頁麪上的元素顯示寬度 const innerWidthElem = document.getElementById('inner-width');
 innerWidthElem.innerText = `${innerWidth}px`;
 const outerWidthElem = document.getElementById('outer-width');
 outerWidthElem.innerText = `${outerWidth}px`;
  /script /body /html 

在這個示例中，我們在 JavaScript 中使用 window.innerWidth 和 window.outerWidth 屬性分別獲取了瀏覽器窗口的內部寬度和外部寬度。然後，我們將獲取到的值分別賦給了 innerWidth 和 outerWidth.