Fullscreen on iPhones

Phaser 3
1

Hi all, beginner here. So I’m working on a game but on iPhones, the game is not opening on full-screen. Been though numerous websites but none of them are working for me. The main gameplay screen starts little after the notch and ends before the bottom of the screen and between them are the white patches. Using the window.innerWidth and window.innerHeight as width and height respectively. It is working well on Androids and PCs but the issue remains on iPhones only. Also, using the scale as Phaser.Scale.FIT. Any help?

2

Have you tried selecting a resolution for your game instead of letting the browser set it? You may run into sub-pixel rendering issues if you don’t select a resolution compatible with your tileset. Phaser can take care of scaling the game properly.

I make retro style pixel art games, so I use low resolutions, but this is how I get it to work full screen on all browsers.

CSS

body {width: 100%;height: 100%;overflow: hidden;margin:0;background:black;padding:0;}
canvas {display:block;width:100%!important;position:absolute;left:0;right:0;margin:0;padding:0;touch-action: none;}

JavaScript

var config = {
	type: Phaser.WEBGL,
	width: 360,
	height: 200,
	pixelArt:true,
	antialias:false,
	activePointers: 3,
	disableContextMenu: true,
	backgroundColor:'#007bee',
	scale: {
		mode: Phaser.Scale.FIT,
		parent: 'phaser',
		autoCenter: Phaser.Scale.CENTER_BOTH,
	},
	physics: {
		default: 'arcade',
		arcade:{
			tileBias: 32,
			solverIterations: 30 // Adjust this value as needed
			// debug:true
		}
	},
	scene: [
		// Menu,		
		// Overworld,
		// UI
	]
};