在全屏模式下查找元素大小

Question

我将全屏模式切换为

$("#myCanvas").webkitRequestFullscreen()

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

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

Answer 1

我本来要在评论中写上这个……但是现在看来有点混乱……xD。

如果要全屏显示，那么您不是只想要屏幕的实际大小吗？ window.screen对象对您有用吗？例如。 window.screen.width还是window.screen.availWidth？

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

在我的控制台中玩了一下，我的假定是在样式重新计算和绘制更改的事件之前会触发fullscreenchange事件。在chrome中，通过将代码放入double 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。