在 ES6 中可靠地确定全屏尺寸

Question

I have a in my document which I scale to full screen using the full screen JS API div.fullscreenRequest(). I find out how large the full screen actually is only after it has been activated, ie, the fullscreenchange event has fired. In this event, I make some computations (original size of div versus new scaled-up size) so I can apply some transformations to the div to make it look right.

The issue I am having is that determining the full screen size is highly unreliable. In the fullscreenchange event, if I do detect that the full screen mode has been activated, and I use screen.width and screen.height, respectively, I sometimes get the correct values back (1920 x 1080) but sometimes I get 1920 x 948 for no apparent reason, non-deterministically. It appears that the event fires in some sort of racy way while the screen is still switching to full screen mode?

What is the reliable way of determining the full screen resolution?

Answer 1

What about this:

 const width = window.screen.width * window.devicePixelRatio, height = window.screen.height * window.devicePixelRatio; console.log("screen size:", width + "x" + height);