时间戳

首页 > 解决方案 > 打开全屏模式后查找元素大小

javascript - 打开全屏模式后查找元素大小

问题描述

我通过以下方式切换全屏模式

$("#myCanvas").webkitRequestFullscreen()

开启全屏模式后如何找到画布的大小？

我试图听“resize”事件以及“webkitfullscreenchange”，但是当他们调度时，画布大小还不是全屏的。

标签： javascripthtmlfullscreen

解决方案

我会把它放在评论中......但现在看起来有点乱...... xD。

如果您要全屏显示，那么您想要的不仅仅是屏幕的实际尺寸吗？这个window.screen对象对你有用吗？EGwindow.screen.width或window.screen.availWidth?

https://developer.mozilla.org/en-US/docs/Web/API/Window/screen

在我的控制台中使用它一段时间，我的假设是 fullscreenchange 事件在样式重新计算和更改的绘制事件之前被触发。在 chrome 中，我能够通过将我的代码放在双 requestAnimationFrame 调用中来报告正确的大小（从而将代码推迟到下一帧）。

所以你的代码可能看起来像......

document.onwebkitfullscreenchange = ((evt) => {
  requestAnimationFrame(() => {
    requestAnimationFrame(() => {
      //code you need to calculate the size of the element here
      console.log(document.querySelector('.container').getBoundingClientRect().width);
    });
  });
});

至少桌面上的 chrome 68 也是如此。YMMV。

推荐阅读