'HTML canvas expand beyond page but elements remain the same when it showing correctly

I am running a html game inside an iFrame. The game is displaying on a canvas.

I am testing the game on Chrome mobile simulator Pixel 5 device size 851x393

I was testing to see whether game display correctly when the user rotate the device.

portrait mode window.innerwith/height is showing as 851 1843

landscape mode window.innerwith/height is showing as 851 393

I am also puzzled, how can innter width/height change when the device rotate?

But the game does display correctly. Following are the elements of each state

Landscape enter image description here

Portrait enter image description here

With these settings the game display correctly.

When I rotate the device few times, the game got expand beyond the screen, as if we are looking at a zoomed upper left hand corner of the game.

However the elements seems to be exact match when it display correctly before. Even though game is not displaying correctly now.

Can anyone provide some assistance on this ?

htmlcanvaslandscapeexpandportrait


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions