应使用 getBoundingClientRect() 获取缩放后的真实视觉尺寸，其 width/height 为浮点值、自动计入 transform 等影响；offsetWidth 仅返回缩放前的整数布局尺寸，忽略 transform，适用于无缩放的 DOM 布局计算。
当元素有 CSS transform: scale() 时，offsetWidth 返回的是缩放前的整数尺寸，而 getBoundingClientRect() 返回的是缩放后的真实视觉尺寸（含小数精度）。想准确获取用户“看到的宽高”，必须用后者；若只做布局空间预留或 DOM 占位计算，前者仍可参考，但需意识到它已失真。
getBoundingClientRect() 是缩放场景下的唯一可靠选择
它返回的 width 和 height 基于当前渲染快照，自动计入 transform、DPI 缩放、页面滚动等影响，单位为浮点像素。即使元素被 scale(0.75) 压缩，rect.width 也会是原始 offsetWidth 的 0.75 倍（比如 200 → 150.32）。
- 返回值是只读对象，包含
top、left、width、height等，全部反映视口坐标系中的真实位置与大小 - 必须在元素已渲染后调用，推荐包裹在
requestAnimationFrame或事件回调中，避免读取到旧帧数据 - 对
display: none或未插入 DOM 的元素，返回的width/height为 0，这点和offsetWidth一致
offsetWidth 在缩放下会“失效”但仍有用途
offsetWidth 本质是盒模型计算结果，完全忽略 transform——它量的是元素在文档流中本该占多少空间，不是人眼看到多少。所以缩放后，它仍返回未缩放前的整数尺寸（如 scale(2) 下仍是 100，而非 200）。
- 适用于需要知道原始布局占用（比如计算父容器是否足够容纳子元素）、或兼容老浏览器且无缩放需求的场景
- 受
box-sizing影响：border-box下含 border+padding+content，content-box下仅 content（但依然不含 transform） - 隐藏元素（
display: none）返回 0；visibility: hidden则正常返回
如何判断是否发生了缩放并校正 offsetWidth
不能靠肉眼或样式字符串判断缩放是否生效，必须通过矩阵解析。可借助 getComputedStyle(el).transform 提取 matrix 或 matrix3d，再提取缩放因子：
立即学习“Java免费学习笔记（深入）”；
- 2D 缩放：若
transform为matrix(a, b, c, d, tx, ty)，x/y 缩放因子分别是Math.sqrt(a*a + b*b)和Math.sqrt(c*c + d*d) - 直接使用
getBoundingClientRect().width / offsetWidth可快速估算平均缩放比（适用于 uniform scale） - 注意：CSS 自定义属性、动画中间帧、或部分浏览器对
transform的解析差异，可能导致getComputedStyle返回none，此时应 fallback 到getBoundingClientRect
实际开发中的处理建议
多数交互场景（拖拽、弹窗定位、碰撞检测、截图裁剪）依赖视觉尺寸，一律优先用 getBoundingClientRect()。只有在纯 DOM 布局逻辑（如 Grid track 分配、Flex 基础尺寸预估）且确认无 transform 时，才考虑 offsetWidth。
- 不要混合使用：避免用
offsetWidth计算位置，再用getBoundingClientRect做边界判断，会导致 1–3px 偏差 - 高精度需求（如 Canvas 绘图适配）务必用
rect.width，并注意它可能带小数，必要时Math.round()或保留原精度 - 性能敏感场景（如每帧计算）可缓存
getBoundingClientRect()结果，但需监听resize、scroll或transitionend以及时更新
