Has better way to manager two different mobile version.(landscape/portrait)

Hello every.

I used pixi to make slot games on my mobile phone.
Now I use the phaser to make slot games build by typescript.

My game must conform to the mobile phone vertical and horizontal version.(landscape/portrait)

When I use pixi, I can use visible to hide my container.

So I need make two different container and make the method to control my size.

But phaser has a good scale function,I don’t even do this thing on phaser.


This is what I thought when I wrote the first game in landscape version.
I use 1920*1080 and it will be auto scale when I using different mobile devices.
My setting is in the GameConfig

const config: GameConfig = {
title: "PhaserClient",
type: Phaser.AUTO,
width: 1920,
height: 1080,
parent: "game",};

When I rotate the phone my canvas will be same like 1920*1080.

this.game.scale.setGameSize(414,736)

I using this to change the different version of my canvas size.

But I need to change everything created in the scene.

Also, unless you set it as a variable, you cannot call the image/spine object to change the position or set the scale.
I need to code like this:

private wholeReel: Phaser.GameObjects.Container | undefined;

window.game.scene.keys.View.wholeReel.setScale(0.3); // window is my object to save Phaser.

Now I finish the landscape(1920*1080), I want to make a new version of portrait using by landscape.
I don’t want to reload all source again.

Is there a better way to handle this thing(Change the position of all objects in the scene at once)

Or this is the best solution. What can I do to make me write better code.

Thanks for your attention.