js获取窗体高度和宽度

<think>好的，用户现在的问题是关于如何使用JavaScript获取窗口的高度和宽度，以实现响应式布局。我需要结合之前的对话历史和提供的引用内容来回答这个问题。首先，回顾一下用户之前的提问和我的回答。 用户之前询问的是在Vue2中实现同源iframe的响应式布局，我给出了基于CSS、Vue逻辑层和跨文档通信的方案，并提到了使用MutationObserver和postMessage等技术。现在用户的新问题转向如何用JavaScript获取窗口尺寸，可能用于响应式布局，这需要我调整焦点到纯JavaScript的方法，并结合引用中的信息。 首先，用户提供的引用内容中，引用[2]提到了使用JavaScript监听视口变化并应用不同样式，这直接相关。引用[1]和[3]讨论了响应式布局的不同方法，比如媒体查询和流式布局，但用户现在明确需要JavaScript的方法，所以重点在引用[2]。 接下来，我需要确定用户的需求。用户可能已经了解CSS媒体查询，但希望用JavaScript动态调整布局，比如根据窗口尺寸加载不同内容，或处理某些无法用CSS实现的复杂交互。需要提供获取窗口高度和宽度的几种方法，并解释它们的区别，以及如何监听窗口变化，同时考虑性能优化。 可能的步骤包括： 1. 区分不同视口属性：window.innerWidth、document.documentElement.clientWidth等，解释它们的区别。 2. 提供基本的代码示例，展示如何获取尺寸并应用到布局中。 3. 讨论如何监听resize事件，并注意防抖优化，避免性能问题。 4. 结合响应式布局的实际应用场景，比如动态加载资源或调整元素样式。 5. 引用之前的回答，提到可能结合Vue的使用，比如在Vue组件中集成这些方法。 还需要注意用户可能混淆窗口尺寸与元素尺寸，需要明确说明。同时，考虑到用户之前处理的是iframe，可能需要提到在iframe内部如何获取父窗口的尺寸，但当前问题可能更关注主窗口。此外，引用[2]中的示例代码可能有用，可以借鉴其中的思路。 最后，确保回答结构清晰，分点说明，并提供代码示例和注意事项，如跨浏览器兼容性、移动端适配等。同时，生成相关问题，帮助用户深入理解。</think>根据引用[2]中提到的JS响应式布局实现方式，结合现代浏览器API，以下是获取窗口尺寸的完整实现方案： --- ### 一、基础尺寸获取方法 ```javascript // 获取可视窗口宽度（含滚动条） const windowWidth = window.innerWidth // 获取可视窗口高度（含滚动条） const windowHeight = window.innerHeight // 获取文档渲染宽度（不含滚动条） const clientWidth = document.documentElement.clientWidth // 获取文档渲染高度（不含滚动条） const clientHeight = document.documentElement.clientHeight ``` #### 核心属性对比： | 属性 | 包含滚动条 | 实时性 | 应用场景 | |------------------------------|------------|--------|----------------------| | `window.innerWidth` | ✔️ | 高 | 媒体查询模拟 | | `document.documentElement.clientWidth` | ❌ | 中 | 精确布局计算 | --- ### 二、响应式监听方案 ```javascript // 防抖函数优化（引用[2]的优化实现） function debounce(fn, delay = 200) { let timer return function() { clearTimeout(timer) timer = setTimeout(() => fn.apply(this, arguments), delay) } } // 尺寸监听器 const handleResize = debounce(() => { console.log('当前窗口尺寸:', window.innerWidth, 'x', window.innerHeight) // 响应式布局应用示例 if (window.innerWidth >= 1200) { document.body.classList.add('desktop-mode') document.body.classList.remove('tablet-mode') } else if (window.innerWidth >= 768) { document.body.classList.add('tablet-mode') document.body.classList.remove('mobile-mode') } else { document.body.classList.add('mobile-mode') } }) // 添加监听（引用[2]基础方案增强） window.addEventListener('resize', handleResize) // 初始执行 handleResize() ``` --- ### 三、高级应用场景 #### 1. 动态加载资源（引用[1]自适应布局延伸） ```javascript function loadResponsiveResource() { const breakpoints = { mobile: 640, tablet: 1024, desktop: 1440 } const currentWidth = window.innerWidth let imageSrc if (currentWidth >= breakpoints.desktop) { imageSrc = 'large.jpg' } else if (currentWidth >= breakpoints.tablet) { imageSrc = 'medium.jpg' } else { imageSrc = 'small.jpg' } document.getElementById('responsive-image').src = imageSrc } ``` #### 2. 与CSS媒体查询同步 ```javascript // 检测当前激活的媒体查询 function getActiveMediaQuery() { return window.matchMedia('(min-width: 1200px)').matches ? 'desktop' : window.matchMedia('(min-width: 768px)').matches ? 'tablet' : 'mobile' } ``` --- ### 四、移动端特殊处理 ```javascript // 处理虚拟键盘弹出（引用[3]移动端适配延伸） const visualViewport = window.visualViewport visualViewport.addEventListener('resize', () => { console.log('视觉视口高度:', visualViewport.height) }) // 检测设备方向变化 window.addEventListener('orientationchange', () => { console.log('新方向:', window.orientation) }) ``` --- ### 关键注意事项 1. **性能优化**：使用防抖/节流控制触发频率，推荐200ms间隔[^2] 2. **单位统一**：建议始终使用`px`进行计算，避免rem单位导致的误差 3. **浏览器兼容**：`visualViewport`需检测兼容性（Chrome 61+） 4. **框架集成**：在Vue中推荐使用`this.$nextTick()`确保DOM更新后计算 ---