remove black border in mobile game

[skywalker]

function create(){	 game.stage.disableVisibilityChange = true;	if (game.device.desktop) {		 	game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;                       game.scale.maxWidth = 1440;            game.scale.maxHeight = 960;            game.scale.pageAlignHorizontally = true;            game.scale.pageAlignVertically = true;            game.scale.setScreenSize(true);            var ow = parseInt(this.game.canvas.style.width,10);			var oh = parseInt(this.game.canvas.style.height,10);			var r = Math.max(window.innerWidth/ow,window.innerHeight/oh);			var nw = ow*r;			var nh = oh*r;			game.canvas.style.width = nw+"px";			game.canvas.style.height= nh+"px";			game.canvas.style.marginLeft = (window.innerWidth/2 - nw/2)+"px"; 			game.canvas.style.marginTop = (window.innerHeight/2 - nh/2)+"px";			document.getElementById("gameContainer").style.width = window.innerWidth+"px";			document.getElementById("gameContainer").style.height = window.innerHeight-1+"px";//The css for body includes 1px top margin, I believe this is the cause for this -1			document.getElementById("gameContainer").style.overflow = "hidden";			console.log(nw);				}else{		 	game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;                        game.scale.maxWidth = 1440;            game.scale.maxHeight = 960;            game.scale.pageAlignHorizontally = true;            game.scale.pageAlignVertically = true;            game.scale.forceOrientation(true, false);            //game.scale.hasResized.add(this.gameResized, this);            //game.scale.enterIncorrectOrientation.add(this.enterIncorrectOrientation, this);            //game.scale.leaveIncorrectOrientation.add(this.leaveIncorrectOrientation, this);            game.scale.setScreenSize(true);            game.scale.setShowAll();            game.scale.refresh();           			// below code is not working 			/*var ow = parseInt(this.game.canvas.style.width,10);			var oh = parseInt(this.game.canvas.style.height,10);			var r = Math.max(window.innerWidth/ow,window.innerHeight/oh);			var nw = ow*r;			var nh = oh*r;			game.canvas.style.width = nw+"px";			game.canvas.style.height= nh+"px";			game.canvas.style.marginLeft = (window.innerWidth/2 - nw/2)+"px"; 			game.canvas.style.marginTop = (window.innerHeight/2 - nh/2)+"px";			document.getElementById("gameContainer").style.width = window.innerWidth+"px";			document.getElementById("gameContainer").style.height = window.innerHeight-1+"px";//The css for body includes 1px top margin, I believe this is the cause for this -1			document.getElementById("gameContainer").style.overflow = "hidden";			*/	}; 

hi im a beginner phaser js game developer i made a small games that responsive all screen and i have problem with mobile devices there is black border around the game stage i want my game to fit all the screen without losing the resolution i used the code in this tobic

 

http://www.html5gamedevs.com/topic/5949-solution-scaling-for-multiple-devicesresolution-and-screens/

 

it is only works for desktop browser  see attachment ile 1 it is small test 

 

but in the mobile device it looks like that 

 

i want solve this problem to it my mobile screen without losing resolution  here is the code i use or Boot

[j0hnskot]

game.scale.scaleMode = Phaser.ScaleManager.EXACT_FIT will make the screen stretch ;

 

Also check here  to see some more solution for better look.

[skywalker]

i tried all the ways in the topic nothing work correctly 

[thunderflash]

Why don't you try putting the world in the html background, and make the game transparent?