HiDPI problem in Cocos2d-js Canvas

Hi everyone.
I am a developer who works with cocos2d-js v3.10
I just made a game of webversion, and for now, I faced in a serious problem.
Everything looks good on windows.
When I load game on mobile, on chrome browser, design doesn’t look tidy and smart.
Very rough, and the borders of element are not tidy.
My design is 1920X1200.
So, I thought, because they scale that large design into small size, smart design become rough.
I wonder if I am right. But everything was good on iPhone.
Then, How can I solve this problem?
Please lend me your hand.
Thanks.

Does graphics looks crips, if yes its due to using high resolution images that seems fine on big screens like desktop but looks crisp on small screens like mobiles… you can load graphics based on screen resolution.
Like for small screens load small resolution images it will save network time and memory too…

Maybe you can tweak coco2d-x resolution settings too according to resolutions…

Thanks ousaf.
Can you send me some useful code please?
I don’t know how to implement it.

You can do some checks like

if( screen resolution is from 320x480 to 640x1024) load mid resolution assets
if( screen resolution is from 640x1024 to 1250x1850) load high resolution assets

I think there must be better solution as I just started with cocos2d-x but I’m sure there will be some settings to tweak resolution of screen…

Can you share both pics of android and desktop gameplay? it will help to understand your problem