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.
