I’m developing an HTML5 application.
To accommodate retina displays, I set the viewport to the following value:

document.querySelector("meta[name=viewport]").setAttribute('content', 'initial-scale='+(1/window.devicePixelRatio)+'');

This absolutely perfectly changes the quality of the image.

However, there is some difficulty.
Chrome itself easily fits the displayed page into the screen size, taking into account this scaling.
But Safari initially displays a much smaller version of my site. Fitting to window size is enabled only if I drag my finger over the background of the browser window.
If I try to programmatically resize the canvas, it results in loss of image quality.

It is impossible to forcefully call the scale() method (apparently this is blocked by the browser itself)

How can I get out of this situation and make Safari automatically adjust the page size to fit the display size and at the same time lose image quality for me?

If I try to programmatically resize the canvas, it results in loss of image quality.

It is impossible to forcefully call the scale() method (apparently this is blocked by the browser itself)