selfsx Posted June 15, 2017 Share Posted June 15, 2017 Hey, Everyone I'm dying making attempts to scale canvas for high dpi mobiles and get everything work correctly. Problem: When I start Phaser with 100% width/height for canvas it will be created according to css pixel size of device (window.innerWidth/innerHeight). So iPhone 6S for example, gets, 375x667 canvas, but in fact, of course it should be 2x bigger because devicePixelRatio is 2. Result, everything is blurry and not as expected. Ok, I decided to set width and height with devicePixelRatio included and then set CSS size of canvas to 100% of view port. let w = window.innerWidth * window.devicePixelRatio; let h = window.innerHeight * window.devicePixelRatio; let game = new Game(w, h) // And then in style sheet: canvas { width: 100vw !important; height: 100vh !important; } Now, it seems like everything looks perfect and as expected (is it correct way to do it?). But, another problem rises. Seems like after this events.onInputDown do not work correctly. When I click on sprite nothing happens, but in different location click handled. Seems like coordinates of input arena is messed up. Can someone help me this this? Link to comment Share on other sites More sharing options...
samme Posted June 15, 2017 Share Posted June 15, 2017 Remove the <canvas> styles and use scaleMode SHOW_ALL. Link to comment Share on other sites More sharing options...
selfsx Posted June 16, 2017 Author Share Posted June 16, 2017 Thank you samme, already figured out this myself at night Link to comment Share on other sites More sharing options...
Recommended Posts