元素触发fullscreenchange后clientWidth/clientHeight值不一致问题

你的推测方向是对的——虽然fullscreenchange事件确实是在元素全屏状态切换完成后触发，但浏览器的布局重排（reflow）和事件回调的执行之间可能存在微小的时序差。当DevTools开启时，浏览器主线程需要处理额外的调试相关任务（比如DOM节点监控、性能采样），这些任务会挤占布局计算的资源，导致元素的尺寸更新被延迟到事件回调执行之后，此时你拿到的clientHeight就是尚未完成全屏适配的旧值。

简单来说：全屏状态变更先完成，但布局重排的速度被DevTools拖慢，导致回调先于尺寸更新执行。

方法1：用requestAnimationFrame延迟获取尺寸 #

requestAnimationFrame会把回调安排在浏览器下一次重绘之前执行，此时浏览器已经完成了所有待处理的布局计算，能确保拿到准确的全屏尺寸。示例代码：

element.addEventListener('fullscreenchange', () => {
  if (document.fullscreenElement === element) {
    // 延迟到下一次重绘前执行尺寸计算
    requestAnimationFrame(() => {
      const width = element.clientWidth;
      const height = element.clientHeight;
      // 这里执行你的计算逻辑
    });
  }
});

方法2：结合resize事件兜底 #

全屏切换通常会触发window.resize事件，你可以在fullscreenchange里标记当前处于全屏状态，然后在resize事件中处理尺寸计算，确保每次尺寸变化都能拿到最新值：

let isFullscreen = false;

element.addEventListener('fullscreenchange', () => {
  isFullscreen = document.fullscreenElement === element;
  if (isFullscreen) {
    // 首次触发时先尝试获取一次
    requestAnimationFrame(updateCalculations);
  }
});

window.addEventListener('resize', () => {
  if (isFullscreen) {
    updateCalculations();
  }
});

function updateCalculations() {
  const width = element.clientWidth;
  const height = element.clientHeight;
  // 执行计算逻辑
}

方法3：使用getBoundingClientRect()替代clientHeight #

getBoundingClientRect()会强制浏览器立即计算最新的布局信息（触发同步重排），虽然性能上比异步方式稍差，但能确保拿到实时尺寸。如果你的场景对性能要求不高，可以直接用：

element.addEventListener('fullscreenchange', () => {
  if (document.fullscreenElement === element) {
    const rect = element.getBoundingClientRect();
    const height = rect.height;
    // 执行计算逻辑
  }
});

注意：优先使用方法1，同步重排可能会导致复杂页面出现性能问题。

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