Scaling problem on iOS

I have scaling problem with iOS (iPhone 11).

The problem:

It should be like:

Comparison

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?

Does it work correctly on iOS Safari?

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**
},

I think iOS Chrome or other browsers is also safari

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

I fix it by adding canvas style

canvas {
height: (browser innerHeight)
}

and update it onresize