Wrong resolution on HTML5 on mobiles

Question

There is an HTML5 game was made using GameMaker Studio. When I open it on mobiles (iOS and Android), it uses a wrong resolution.

An example. A game uses 960*640:

But on the phone I see this:

Also there you can see browser's resolution which was returned by the engine. As you can see, it's x3 times lower than actual resolution (640*360 instead of 1920*1080). Of course my first mind was that it's an engine's bug. But I checked it using HTML/JS and there were same values. One person on StackOverflow mentioned viewport meta and seems like it may help.

I looked into index.html generated by GMS, and there was a line

<meta name ="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

I have no experience with HTML/etc, so I just tried some values:

<meta name ="viewport" content="width=device-width" />
<meta name ="viewport" content="width=device-width, height=device-height" />
<meta name ="viewport" content="width=960, height=640" />
<meta name ="viewport" content="width=640, height=960" />

and some other.

But it is not solved the problem. Although sometime the result was better.

Is there any magic to make the game work as well?

P.S. If it would help:

You can see index.html there

Compiled project there (as I understand, it won't work from local disk)

P.P.S. I use Chrome and Samsung Internet on Android and Safari + Chrome on iOS.

P.P.P.S. I know about window.devicePixelRatio, but I don't know how it may be used there.

upd: Even with just content="width=device-width" it shows the whole picture, but the picture has low vertical resolution. For example, 960*420 (on 1920*1080 display) in landscape mode. Of course then the game looks terrible. If I flip device to portrait orientation then the browser returns 960*1494. The image looks perfect, but it too small (takes only about 1/3 of the display). So I need the vertical resolution of the browser was bigger (or equal) than the height of the game canvas.

upd2: Was found solution

<script type="text/javascript">
    var canvas = document.getElementById("canvas");

    function canvas_resize(){
        canvas.width = 960 * window.devicePixelRatio;
        canvas.height = 640 * window.devicePixelRatio;
    }

    window.addEventListener("orientationchange", canvas_resize);

    document.addEventListener("DOMContentLoaded", function () {
        canvas_resize();
    })
</script>

but there are two problems:

1. It works on Android, but it doesn't work on iOS (iOS shows the image with very low resolution). What solution would work on iOS?
2. Browser should to request for desktop version of the site ("Request desktop site" option). When browser requests a mobile version of the site, it also always uses low resolution. Is there way to avoid it?