geometrychange事件仅在启用WCO且为已安装桌面PWA时存在，需运行时检测window.windowControlsOverlay后注册监听，用于响应标题栏尺寸变化并手动更新CSS变量。
geometrychange 事件只在启用 WCO 后存在，且仅对已安装的桌面 PWA 生效
这个事件不是全局可用的 DOM 事件，它只挂载在 window.windowControlsOverlay 对象上，而该对象本身只在满足三个条件时才存在：manifest 中正确配置了 display_override: ["window-controls-overlay"]、当前运行环境是已安装的桌面 PWA（非网页标签页）、浏览器支持该 API（Chrome 112+、Edge 112+）。漏掉任一条件，window.windowControlsOverlay 就是 undefined，直接监听会报 Cannot read property 'addEventListener' of undefined。
必须用 if('windowControlsOverlay' in window) 做运行时检测
不能依赖 @supports 或 UA 判断，因为该 API 的可用性与安装状态强相关。常见错误是把监听写在顶层脚本里，没加保护就调用：
${bounds.height}px
- 用户手动点击标题栏右上角切换按钮时，
geometrychange会触发，此时bounds.height可能变为0 - 系统 DPI 改变、窗口缩放到不同显示器、全屏/退出全屏也会触发该事件
- 事件不冒泡，无法委托；每个监听器需独立注册
geometrychange 不等于 titlebar-area-geometry
注意文档中混用的两个名称：geometrychange 是标准事件名，而 titlebar-area-geometry 是旧版草案名，目前已废弃。部分早期示例或旧版 Edge 文档仍用后者，但实际运行中只有 geometrychange 有效。监听错名字会导致静默失败，无任何报错。
另外，该事件不提供参数对象里的坐标信息——你仍需主动调用 getBoundingClientRect() 获取最新尺寸。它只是个“通知你该去读了”的信号。
配合 CSS env() 使用时，geometrychange 不能替代 @supports 检测
env(titlebar-area-height) 这类 CSS 环境变量是否注入，取决于 manifest 配置和运行环境，与 JS 是否监听 geometrychange 无关。即使你监听了事件并手动更新了 CSS 自定义属性，也不能让 env() 在不支持的环境里突然生效。
所以真实项目中要双保险：
- 用
@supports (background: env(titlebar-area-height))控制基础布局回退 - 用
geometrychange处理动态变化（比如拖动窗口后高度微调、用户隐藏标题栏后清空 padding） - 两者不可互相替代，缺一不可
最易被忽略的一点：geometrychange 触发时，getBoundingClientRect() 返回的 DOMRect 坐标系是相对于 viewport 的，但它的 x/y 值在多数情况下恒为 0，真正需要关注的只有 height 和 width；若要做左对齐控件，应优先用 CSS 的 env(titlebar-area-x) 而非 JS 读取。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
