Phaser, Canvas HighDPI Size, Input Problems

[selfsx]

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?

 

[samme]

Remove the <canvas> styles and use scaleMode SHOW_ALL.

[selfsx]

Thank you samme, already figured out this myself at night