virginia_games Posted April 4, 2015 Share Posted April 4, 2015 Hi all, I have an app I am working on that almost done and looks nice on my phone (Samsung Note 4). However, my scaling technique is not working on all phones, leaving some screens looking like this pic attached (hope you can see the white border around the off-white screen! The pic is HTC One X. Similar issues on tablets). My code setup is pretty simple:index.html file: <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Title</title> <script src="js/phaser.min.js"></script> <script src="js/main.js"></script></head><body><center><div id="game"></div></center></body></html> Sizing inside of main.js: var w = window.innerWidth * window.devicePixelRatio;var h = window.innerHeight * window.devicePixelRatio;var game = new Phaser.Game( w, h, // Width, height of game in px Phaser.AUTO, // Graphic rendering "", { preload: preload, // Preload function create: create, // Creation function update: update } // Update function ); I'm resizing screen elements according to w and h, so everything is designed to respond to w/h. Is this a problem with my div structure? I tried completely removing the html file... using canvas introduces a whole new host of problems though, with scale still unresolved (in canvas either does not show up or appears too large). Also tried changing the div name, using other techniques like: w = (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth) * window.devicePixelRatio; I can't seem to figure out how to get this to fullscreen. I am using WebView+ (not canvas), and min android version is 2.3. Help appreciated Link to comment Share on other sites More sharing options...
Recommended Posts