•
前端
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.