【前端】javascript：element.requestFullscreen() 进入全屏后，$(window).height() 获取的是非全屏状态下的高度，而不是全屏高度

当调用 element.requestFullscreen() 进入全屏后，$(window).height() 获取的是非全屏状态下的高度，而不是全屏高度。以下是详细分析：

关键原因：

1. requestFullscreen() 是异步操作：

   • 调用后浏览器需要时间切换全屏，不会立即更新 window 的尺寸。
   • 立即执行 $(window).height() 可能仍返回旧值（非全屏高度）。

2. 正确获取全屏高度的方式：

   • 必须监听 fullscreenchange 事件，在全屏切换完成后获取高度：

   const element = document.documentElement;
   element.requestFullscreen();
   
   // 监听全屏切换完成事件
   document.addEventListener('fullscreenchange', () => {
     if (document.fullscreenElement) {
       const fullscreenHeight = $(window).height(); // ✅ 此时获取的是全屏高度
       console.log("全屏高度:", fullscreenHeight);
     }
   });
   

验证示例：

// 进入全屏
const element = document.documentElement;
element.requestFullscreen();

// 错误：立即获取（可能得到非全屏高度）
console.log("立即获取:", $(window).height()); // ❌ 非全屏高度

// 正确：通过事件监听
document.addEventListener('fullscreenchange', () => {
  if (document.fullscreenElement) {
    console.log("全屏后获取:", $(window).height()); // ✅ 全屏高度
  }
});

补充说明：

• 全屏高度 ≈ 屏幕高度：
  全屏后 $(window).height() 通常等于 screen.height（设备屏幕高度），减去操作系统任务栏/浏览器 UI 的占用（浏览器全屏时会自动隐藏部分 UI）。
• 同步获取的替代方案：
  若需避免事件监听，可用 setTimeout 延迟获取（不推荐，可靠性低）：

  element.requestFullscreen();
  setTimeout(() => {
    console.log($(window).height()); // 可能有延迟但能获取全屏高度
  }, 1000); // 延迟时间不确定
  

总结：

务必通过事件监听确保获取全屏后的最新高度！