Scaling problem on iOS

Phaser 3
1

I have scaling problem with iOS (iPhone 11).

The problem:

ytuk
ytuk693×998 474 KB

It should be like:

ytry
ytry502×897 543 KB

Comparison

gfhfh
gfhfh667×719 322 KB

On first image, its seem cropped. layout must be fit with all screen ration.

My code:

<meta name="viewport" content="height=device-height, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui" />

scale: {
mode: Phaser.Scale.HEIGHT_CONTROLS_WIDTH,
parent: ‘game_content’,
autoCenter: Phaser.Scale.CENTER_BOTH,
},

Note: I use container to re-scale some game objects (cards, header, footer).

This scaling are working fine on desktop, android and iPhone SE with iOS 11.

I hope its enough explanation.

Any idea to fix this?

2

Does it work correctly on iOS Safari?

3

Have you tried using fixed numbers for the width and height? that seems to work for me:

scale: {
mode: Phaser.Scale.FIT,
parent : ‘gameContainer’,
autoCenter: Phaser.Scale.CENTER_BOTH,
width:888,
** height: 520**
},

4

I think iOS Chrome or other browsers is also safari

5

No i can’t, game canvas must be full HD

6

I fix it by adding canvas style

canvas {
height: (browser innerHeight)
}

and update it onresize

1 Like