requestFullscreen后window.innerHeight约150ms才更新，最优处理方案是什么？

调用浏览器全屏API requestFullscreen() 后，window.innerHeight 不会立即同步更新，测试数据显示通常需要约150ms才能拿到正确的全屏高度：

最优处理方案：监听全屏状态变化事件 #

不要用固定延迟的定时器轮询，而是通过监听浏览器的全屏状态变更事件来获取准确的innerHeight——这是浏览器在完成全屏切换后主动触发的事件，能保证拿到的值是最新的，且适配不同设备、浏览器的差异（避免固定延迟在某些场景下失效）。

具体实现步骤 #

• 注册全屏状态变化的监听事件，覆盖所有浏览器前缀：
  • 标准事件：fullscreenchange
  • webkit内核浏览器：webkitfullscreenchange
  • Gecko内核浏览器：mozfullscreenchange
  • IE浏览器：MSFullscreenChange
• 在事件回调函数中读取window.innerHeight，此时已更新为全屏后的正确高度。

修改后的代码示例 #

// 全屏请求逻辑保持不变
const docElm = document.documentElement;
if (docElm.requestFullscreen) {
    docElm.requestFullscreen();
} else if (docElm.msRequestFullscreen) {
    docElm.msRequestFullscreen();
} else if (docElm.mozRequestFullScreen) {
    docElm.mozRequestFullScreen();
} else if (docElm.webkitRequestFullScreen) {
    docElm.webkitRequestFullScreen();
}

// 替换定时器，改用全屏事件监听
function handleFullscreenChange() {
    // 确认当前处于全屏状态
    if (document.fullscreenElement || 
        document.webkitFullscreenElement || 
        document.mozFullScreenElement ||
        document.msFullscreenElement) {
        const fullscreenHeight = window.innerHeight;
        console.log('全屏高度：', fullscreenHeight);
        // 这里可以执行需要用到全屏高度的逻辑
    }
    // 可选：退出全屏时也可以处理对应逻辑
}

// 添加事件监听
document.addEventListener('fullscreenchange', handleFullscreenChange);
document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
document.addEventListener('mozfullscreenchange', handleFullscreenChange);
document.addEventListener('MSFullscreenChange', handleFullscreenChange);

为什么不推荐定时器方案？ #

原代码中用固定间隔的定时器轮询，存在两个明显问题：

• 准确性差：不同设备、浏览器的全屏切换耗时可能不同，固定150ms延迟可能在某些场景下过早（拿到错误值）或过晚（浪费性能）。
• 性能冗余：无意义的轮询会增加不必要的JS执行开销，而事件监听是按需触发，更高效。

内容的提问来源于stack exchange，提问作者Dinsdale Trelawney