如何用 window.outerHeight 与 innerHeight 判断浏览器工具栏是否占用了屏幕空间

<p>工具栏高度等于 window.outerHeight - window.innerHeight，因 screen.availHeight 与浏览器窗口无关故不可用；需处理移动端地址栏动态隐藏、Electron 环境及旧浏览器兼容等边界情况。</p>

用 window.outerHeight 和 window.innerHeight 算工具栏高度

两者差值就是浏览器 UI 占用的垂直空间，包括地址栏、书签栏、扩展栏等。公式很简单：window.outerHeight - window.innerHeight。这个差值在桌面端通常是固定值（比如 Chrome 窗口最大化时约 70–100px），但最小化/非全屏状态下会变；移动端 Safari 的地址栏是动态隐藏的，差值会随滚动变化。

为什么不能直接用 screen.availHeight 做对比

screen.availHeight 是屏幕可用区域（减去任务栏），但它和浏览器窗口无关——用户可能只开了一个窄高窗口，screen.availHeight 还是 1024，而 window.outerHeight 可能只有 600。拿它跟 window.innerHeight 比，会误判“工具栏占了 400+px”，实际只是窗口没铺满屏幕。真正要判断的是「当前这个浏览器窗口里，UI 控件吃掉了多少视口空间」，所以必须用 outerHeight 和 innerHeight 同源计算。

容易忽略的三个边界情况

– 移动端 Safari 在页面滚动时会收起地址栏，window.innerHeight 会变大，window.outerHeight 不变，导致差值变小甚至为 0。这意味着「工具栏是否占据空间」不是静态布尔值，而是随交互变化的。
– Electron 或桌面 Web 应用可能禁用工具栏，此时差值接近 0，但不能默认认为「无工具栏」——得结合 process?.type === 'renderer' 等上下文判断环境。
– 某些浏览器（如旧版 IE）不支持 outerHeight，需降级：先检测 typeof window.outerHeight !== 'undefined'，否则返回 0 并记录 fallback 行为。

实际检测逻辑怎么写才可靠

不要只看单次取值，尤其在移动端。推荐做法：
– 在 resize 事件中缓存最近 3 次的 outerHeight - innerHeight 差值
– 如果连续两次差值变化超过 20px（排除抖动），且新值明显小于旧值，大概率是地址栏收起了
– 初始加载时用 setTimeout(() => { /* 取值 */ }, 300)，避开 iOS Safari 渲染延迟导致的 innerHeight 偏小问题
– 工具栏高度建议设为阈值判断，例如：const toolbarHeight = Math.max(0, window.outerHeight - window.innerHeight); if (toolbarHeight > 40) { /* 视为有可见工具栏 */ }