window.innerWidth 和 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 和 |
|
来自: 汪子熙 > 《JavaScript》