Issues with overlapping navigation bar on android and tabs on iOS

[Michel (Starnut)]

Hey guys, it's been a while and I've grown a bit rusty. I've build this small game in landscape mode, set it to SHOW_ALL scaling and now have two issues that seem related to me:

1. on Safari mobile on an iPhone 6S+ (the large one), tabs will not be hidden but, instead, overlap the game from the top.

2. on Android the software navigation bar overlaps the game from the bottom and makes it literally unplayable since the buttons are hidden under it.

(images attached to this post)

Is that a regular behavior or can I do something about it?

Here is my entire mobile scaling code and the entire HTML header I took from an older Phaser game template. What am I missing?

Thanks,

Michel

this.stage.disableVisibilityChange = true;
this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
this.scale.setMinMax(480, 260, 945, 530);
this.scale.pageAlignHorizontally = true;
this.scale.pageAlignVertically = true;
this.scale.forceOrientation(true, false);
this.scale.setResizeCallback(this.gameResized, this);
this.scale.enterIncorrectOrientation.add(this.enterIncorrectOrientation, this);
this.scale.leaveIncorrectOrientation.add(this.leaveIncorrectOrientation, this);

 

	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="chrome=1, IE=9">
	<meta name="format-detection" content="telephone=no">
	<meta name="HandheldFriendly" content="true" />
	<meta name="robots" content="noindex,nofollow" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black" />
	<meta name="apple-mobile-web-app-title" content="Phaser App">
	<meta name="viewport" content="initial-scale=1 maximum-scale=1 user-scalable=0" />