Jump to content

Issues with overlapping navigation bar on android and tabs on iOS

Michel (Starnut)

Recommended Posts

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?



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" />




Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...