PIXI game looks blurry on mobile devices

[BSH]

I can't get Pixi game look crispy on mobile devices. Whenever window.devicePixelRatio is greater than 1, no matter what I do game doesn't look as crispy as it looks when window.devicePixelRatio equals to 1. Images for mobile version are saved separately (downscaled using photoshop). Using roundPixels = true on my sprites.

 

devicePixelRatio:1
 

devicePixelRatio:3

 

Any help would be much appreciated.

Here is how I am setting up my stage:
 

if (window.devicePixelRatio){

    RESOLUTION = window.devicePixelRatio;

}

PIXI.GRAPHICS_CURVES.adaptive = false;

PIXI.settings.autoDensity = true;

PIXI.settings.ANISOTROPIC_LEVEL = 0;

PIXI.settings.RESOLUTION = window.devicePixelRatio;

let app = new PIXI.Application({

    width:window.innerWidth/RESOLUTION,

    height: window.innerHeight/RESOLUTION,

    antialias: true,

    autoResize: true,

    resize: (window.innerWidth/RESOLUTION, window.innerHeight/RESOLUTION),

    transparent: false,

    resolution: window.devicePixelRatio,

    rootRenderTarget: {

        resolution: window.devicePixelRatio

    },

    backgroundColor: secondColor,

});

 

[Exca]

Is your canvas scaled when using higher dpr? Also you have some options in the app creation that I cannot see in the docs. Resize & rootRenderTarget.

You could try adding autoDensity:true to make the canvas css be set automatically based on resolution. I usually do those calculations manually, but should work via app also.

[BSH]

Placing autoDensity:true within new PIXI.Application({...}) did the magic. Appreciate your help!

Thank you so much!!!