pixi.js retina display doubled in size - pixi.js

Question

I know the same question has been asked by other people before, but that was a long time ago and the API are changed, and they didn't solve my problem.
Here is my problem:
I have a problem about retina display, let's take iPhone 6 for example. The size of the screen is 375x667, and the device pixel ratio is 2, which means the physical pixel is 750x1334 and the CSS pixel is 375x667.
If we want a full screen canvas, what we usually do is to set the canvas size to 750x1334, and then set the actually display size of canvas to 375x667.
This is what I have done in pixi.js(v5.1.1):
let app = new Application({
width: 375,
height: 667,
antialiasing: true,
resolution: 2,
autoDensity: true,
})
I set the resolution : 2, and autoDensity : true, but when I add a sprite with size of 750x1334, it only shows a quarter of the sprite(The size is doubled). It seems that the autoDensity is not working.
What now I am doing is setting the whole stage with scale(0.5):
app.stage.scale.set(0.5);
It temporarily solved my problem, but I feel like this is not the current way to go. You shouldn't use scale for this kind of thing.
What should I do then?

Answer 1

Use CSS to set the canvas size in CSS units, and initialize the renderer using the proper dimensions according to the devices pixel ratio.
let canvas = document.createElement("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let app = new Application({
width:window.innerWidth*window.devicePixelRatio,
height:window.innerHeight*window.devicePixelRatio,
antialiasing: true,
view:canvas
});