Search the Community

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