JavaScript获取浏览器窗口尺寸主要用window.innerWidth/innerHeight（推荐，返回不含滚动条的可视区域宽高）和document.documentElement.clientWidth/clientHeight（兼容旧IE），需区分视口与文档尺寸，并通过resize事件监听变化，移动端注意viewport设置和devicePixelRatio适配。
JavaScript 获取浏览器窗口尺寸，主要靠 window.innerWidth、window.innerHeight 和 document.documentElement 相关属性，关键在于区分“可视区域”和“整个文档”的尺寸，以及是否包含滚动条。
获取当前可视区域大小（推荐）
这是最常用、最可靠的方式，返回用户当前实际看到的视口宽高（不含滚动条）：
- window.innerWidth：返回浏览器窗口内部宽度（单位像素），含垂直滚动条宽度（但现代浏览器通常已自动扣除）
- window.innerHeight：返回浏览器窗口内部高度（单位像素），同理处理水平滚动条
示例：
console.log(window.innerWidth); // 如 1280 console.log(window.innerHeight); // 如 720
获取文档根元素尺寸（兼容旧环境）
在某些低版本 IE 或特殊渲染模式下，window.innerWidth 可能不可用，可回退到 document.documentElement：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
立即学习“Java免费学习笔记（深入）”；
-
document.documentElement.clientWidth：等价于
window.innerWidth（不包括滚动条） -
document.documentElement.clientHeight：等价于
window.innerHeight - 注意：
offsetWidth/Height和scrollWidth/Height返回的是整个文档宽高（含溢出部分），不是视口尺寸
监听窗口尺寸变化
用户缩放、旋转设备或拖动窗口时尺寸会变，需用 resize 事件响应：
- 建议节流处理，避免频繁触发（如使用
setTimeout防抖） - 不要在
resize中直接调用重绘操作，优先用 CSS 媒体查询或matchMedia
简单示例：
function handleResize() {
console.log('新尺寸：', window.innerWidth, 'x', window.innerHeight);
}
window.addEventListener('resize', handleResize);
移动端需额外注意 viewport
移动设备上，CSS 像素与物理像素不同，window.innerWidth 返回的是 CSS 像素值（即视口宽度）：
- 若页面设置了
<meta name="viewport" content="width=device-width">，window.innerWidth通常等于设备逻辑宽度 - 可通过
window.devicePixelRatio获取设备像素比，用于高 DPI 适配 - 横竖屏切换时，
resize事件会触发，但 iOS Safari 有延迟，建议结合orientationchange补充监听
