window.innerWidth 和 window.outerWidth 是两个浏览器对象属性，分别代表浏览器窗口的内部宽度和外部宽度。它们的区别如下：

- window.innerWidth: 表示浏览器窗口的内部宽度，即可视区域的宽度。这个宽度不包括滚动条，但包括任何边框（border）和内边距（padding），即是指可视区域内可用于显示文档的宽度，单位为像素。

- window.outerWidth: 表示浏览器窗口的外部宽度，即整个浏览器窗口的宽度，包括滚动条、边框和窗口周围的任何其他元素。这个宽度是整个浏览器窗口的宽度，包括浏览器窗口自身的宽度、浏览器菜单栏、工具栏、状态栏以及其他附加组件的宽度。

换句话说，window.innerWidth 只是浏览器窗口内部可见区域的宽度，而 window.outerWidth 是整个浏览器窗口的宽度，包括任何边框、滚动条和其他窗口元素。

在编写响应式Web设计时，通常会使用 window.innerWidth 来检测浏览器窗口的宽度，以便根据不同的窗口宽度来调整页面的布局和样式。而 window.outerWidth 则通常用于检测用户的屏幕分辨率，以便为不同的屏幕分辨率优化页面布局和样式。

看个具体的例子：

```html
<!DOCTYPE html>
<html>
<head>
  <title>获取浏览器窗口宽度</title>
</head>
<body>
  <p>浏览器窗口内部宽度： <span id="inner-width"></span></p>
  <p>浏览器窗口外部宽度： <span id="outer-width"></span></p>

// 更新页面上的元素显示宽度
    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`.

ITPub博客

浏览器对象属性 window.innerWidth 和 window.outerWidth 这两个宽度属性有何区别？

最新文章