christian.tucker Posted December 15, 2014 Share Posted December 15, 2014 By "Full-screen" I mean to just take up the entire browser. The goal of my game is to work on both mobile devices and desktops, and it does!(Ofcourse, it's html5, lol). However, the problem is with the sizing on my phone. The canvas is much larger than the actual window and I can't move around or zoom out any, not to mention the huge "blank area" that's there for absolutely no reason. Screenshot from mobile: Notice the large area on the left? Here's the code I'm using for fullscreen, it may be wrong. (Uses JQuery)window.onload{ var width = $(window).width(); var height = $(window).height(); var game = new Phaser.Game(width, height, Phaser.AUTO, 'game'); game.state.add('preloadState', preloadState); game.state.add('loginState', loginState); game.state.add('cityState', cityState); game.state.start('preloadState');}My over-all goal is to create a seperate UI for mobile/desktop and display them based on what device type they're on, but for now I need to figure this out properly. On the computer, this goes "fullscreen" perfectly fine. -- Not using the fullscreen API Link to comment Share on other sites More sharing options...
christian.tucker Posted December 16, 2014 Author Share Posted December 16, 2014 bump. Link to comment Share on other sites More sharing options...
SolarJS Posted December 16, 2014 Share Posted December 16, 2014 Going fullscreen on mobile is much more complex than on desktop. There are lot's of glitches to take care for. The first thing you should start at is looking for "viewport" tutorials. Also, keep you screen size in mind. Right now it looks like you designed the screen in 4:3 aspect ratio. That won't work on mobile, except on an iPad or other devices using 4:3 ratio. You have to decide for a strategy how to span to different screen sizes like 21:9, 16:9 etc. Link to comment Share on other sites More sharing options...
Recommended Posts