获取页面布局宽度需按需选择API：viewport宽用window.innerWidth，文档总宽用document.documentElement.scrollWidth，元素宽优先用getBoundingClientRect().width，并注意缩放与DPI影响。
获取页面布局宽度，关键在于明确你真正需要的是哪一部分的宽度——是浏览器可视区域、整个文档、某个元素，还是考虑缩放、滚动条影响后的实际可用宽度。不同场景对应不同 API，选错会导致数值偏差。
获取浏览器可视区域宽度（viewport width）
这是最常用的需求，比如响应式判断或动态适配。推荐使用 window.innerWidth，它返回当前窗口的内部宽度（含滚动条位置，但不包含浏览器 UI 边框）。
- 它会随窗口缩放、设备旋转实时变化，适合监听 resize 事件
- 注意：在某些移动端浏览器中，竖屏转横屏初期可能暂未更新，建议配合
setTimeout延迟读取或监听orientationchange - 避免用
document.documentElement.clientWidth替代——它在页面有横向滚动条时可能比innerWidth小 16px（滚动条占位）
获取整个文档的总宽度（document width）
当页面内容超出视口、出现横向滚动时，需知道文档实际渲染宽度。使用 document.documentElement.scrollWidth 最可靠。
- 该值等于文档根元素（
）的总内容宽度，包括溢出部分 - 注意：必须确保 DOM 已加载完成（如放在
DOMContentLoaded或load事件后），否则可能返回 0 或不准确值 - 不要用
document.body.scrollWidth—— 在某些 DOCTYPE 下，body不撑满高度/宽度，结果不可靠
获取某个元素的布局宽度（element width）
对特定元素，应优先使用 getBoundingClientRect().width，它返回元素相对于视口的 CSS 像素宽度（已计算 padding、border，不含 margin）。
立即学习“Java免费学习笔记（深入）”；
- 相比
offsetWidth，getBoundingClientRect()更精确，尤其在存在 CSS 缩放（transform: scale()）时仍能反映视觉宽度 - 若需包含 margin，需手动加上
getComputedStyle(element).marginRight和marginLeft - 注意：该方法返回浮点数，必要时用
Math.round()取整
处理缩放与高 DPI 屏幕的影响
在 macOS Retina 屏或 Windows 缩放设置 >100% 时，CSS 像素和物理像素不同，innerWidth 等返回的是 CSS 像素值，通常符合预期；但若需物理像素宽度，可结合 window.devicePixelRatio：
const physicalWidth = window.innerWidth * window.devicePixelRatio- 注意：
devicePixelRatio是只读属性，且在用户调整系统缩放时不会触发事件，需监听resize并重新获取 - 大多数前端布局无需物理像素，除非做 Canvas 绘图或图像导出等底层操作
