Window Controls Overlay：自定义标题栏与安全区适配

概述Window Controls Overlay 允许 PWA 在桌面上使用可定制的标题栏区域。通过 manifest 的 `display_override` 启用，并使用 `env(titlebar-area-*)` 变量进行定位与适配。用法/示例{

"display_override": ["window-controls-overlay"]

}

.titlebar {

position: fixed;

left: env(titlebar-area-x);

top: env(titlebar-area-y);

width: env(titlebar-area-width);

height: env(titlebar-area-height);

}

if (navigator.windowControlsOverlay) {

navigator.windowControlsOverlay.addEventListener('geometrychange', e => {

const r = e.titlebarAreaRect

})

}

工程建议为不同平台与窗口状态提供适配与回退；避免遮挡可交互元素。监听可见性与几何变化，动态调整布局与交互命中区域。与主题与菜单协作，保持一致的可用性与无障碍体验。参考与验证Chrome Docs：Window Controls Overlay — https://developer.chrome.com/docs/web-platform/window-controls-overlayweb.dev：Window Controls Overlay — https://web.dev/articles/window-controls-overlay