浏览器对象属性 window.innerWidth 和 window.outerWidth 这两个宽度属性有何区别？
【摘要】 window.innerWidth 和 window.outerWidth 是两个浏览器对象属性，分别代表浏览器窗口的内部宽度和外部宽度。它们的区别如下：window.innerWidth: 表示浏览器窗口的内部宽度，即可视区域的宽度。这个宽度不包括滚动条，但包括任何边框（border）和内边距（padding），即是指可视区域内可用于显示文档的宽度，单位为像素。window.outerWi...
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.
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）