haden Posted February 24, 2014 Share Posted February 24, 2014 This used to work on previous versions of Phaser, specifically 1.00TS083, but when I noticed it doesn't work anymore. I am setting up my game on mobile as follows (among other things):this.game.stage.scaleMode = Phaser.StageScaleMode.EXACT_FIT;this.game.stage.scale.setScreenSize(true);When testing the game on my iPod touch 4th gen (iOS 6.1.6) the game scales properly and hides the address bar on Safari without problem. When I change the orientation of the device, the "rotate your phone" is displayed correctly, again with no visible address bar, but when I rotate the game back to portrait, the address bar is now visible. I did some debugging and it seems to be related to the following line in StageScaleMode.js// Set minimum height of content to new window heightdocument.documentElement['style'].minHeight = window.innerHeight + 'px';it used to be in 1.00TS083:document.documentElement['style'].minHeight = '2000px';Changing the previous line to:document.documentElement['style'].minHeight = (window.innerHeight + 60) + 'px';Seem to fix the problem on my iPod. Is it the correct way to fix this, or does my change have some bad effects on other devices ? Link to comment Share on other sites More sharing options...
rich Posted February 24, 2014 Share Posted February 24, 2014 It was a bit of a hack in the first place, and probably not very wise / future proof (the +2000px thing). However if it works for you, then keep it? One thing you could try though - set your body height to +1px in your css, this seems to be enough for me to trigger full screen again:body { margin: 0px 0px 1px 0px; /* the extra 1px allows the iOS inner/outer check to work */} Link to comment Share on other sites More sharing options...
haden Posted February 24, 2014 Author Share Posted February 24, 2014 It was a bit of a hack in the first place, and probably not very wise / future proof (the +2000px thing). However if it works for you, then keep it? It works indeed, just wanted to make sure it's won't be conflicting with some browser on some mobile One thing you could try though - set your body height to +1px in your css, this seems to be enough for me to trigger full screen again:body { margin: 0px 0px 1px 0px; /* the extra 1px allows the iOS inner/outer check to work */} This one didn't work, the address bar hides really slowly (like 1px per second). Link to comment Share on other sites More sharing options...
haden Posted March 4, 2014 Author Share Posted March 4, 2014 For some reason, I can't hide the address bar on my Android phone's stock browser anymore, and when it does disappear, the game doesn't scale to fill the empty space left at the bottom of the screen (it has the same height of the bar). I am probably missing something obvious, so I'm posting my code here maybe someone can help fix this.<!doctype html><html> <head> <meta charset="UTF-8" /> <title>hello phaser!</title> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0" /> <style type="text/css"> body { margin: 0px 0px 1px 0px; /* the extra 1px allows the iOS inner/outer check to work */ background: #ccc; } </style> <script src="phaser.js"></script> </head> <body> <div id="gameContainer"></div> <script type="text/javascript"> window.onload = function() { var game = new Phaser.Game(320, 480, Phaser.AUTO, '', { preload: preload, create: create }, "gameContainer"); function preload () { game.load.image('background', 'background.png'); } function create () { game.stage.scaleMode = Phaser.StageScaleMode.EXACT_FIT; game.stage.scale.setScreenSize(true); game.add.sprite(0, 0, 'background'); } }; </script> </body></html>Using this with Phaser 1.1.6 doesn't hide the bar at all. You can try it yourself here: http://goo.gl/596fPl When I changed phaser like I described above, the bar is hidden but the canvas doesn't fill all window. Here is a link if you want to give it a try: http://goo.gl/En4i2S Link to comment Share on other sites More sharing options...
Recommended Posts