Mobile device resize causes strange behavior.

[sout7]

Hello!

Can I know which events are fired upon mobile device resizing? They cause some frustrating difficulties in an effort to make developing easier...

I want my canvas height to be 1500px and the user to scroll up and down, while the width is equal to the device width. I want NOTHING more. I tried setting meta tags for it, I tried the different Phaser.ScaleManager stuff, but there is always some sodding event that fires and makes this task a pain in the ***.

I have this in my index.html to make the user unable to zoom:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

At the bottom of my create function (my game is called "menu"), I have:

menu.scale.scaleMode = Phaser.ScaleManager.RESIZE;
menu.scale.fullScreenScaleMode = Phaser.ScaleManager.RESIZE;
menu.input.touch.preventDefault = false;

The preventDefault is false because otherwise, when the player selects an input field in the menu (to sign in their account), they can't deselect it.

The other two lines are a bit complicated.

If the scaleMode is default, when you scroll (and the address bar in the browser of the device folds), the resize event is fired. For some reason, that makes you unable to scroll or zoom anymore (it disables zoom without the meta tag too). If you change the device orientation - same thing happens. If you toggle fullscreen, same thing happens. All scaleModes have this result. With RESIZE and the property "height=1500" in the meta tag, however, when the address bar folds, the resize event isn't fired and the problem doesn't occur. If you change orientation or toggle fullscreen, it happens again, though. I tried using the setMinMax too, but that just stretches the canvas (and still doesn't fix the scroll problem).

The height of the canvas and the body remain the same. I mean, they don't get resized to device height, so that the scroll disappears. The "overflow" property of the body is "scroll" too. I also tried to set the scaleMode to null, so that nothing happens. Well... it still causes this problem.

Those problems are not present in desktop, so it's something related to mobile only and the events upon resizing. The only way something kind of works is when the resize event is not fired.

 

To sum it up, here is what I need: inability to zoom the game (with meta tag), 1500px height that can be scrolled up and down and width that is equal to the device width. I want that in both orientations, with and without fullscreen. In case that can't be achieved, I would appreciate a way to prevent Phaser from doing anything upon resize...