乐趣区

关于前端:浏览器对象属性-windowinnerWidth-和-windowouterWidth-这两个宽度属性有何区别

jiezi

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.

退出移动版