Mobile Safari viewport scaling problem

Beta Testing HTML5
#1

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?

#2

In general, I struggled with this problem for a long time and was able to solve it with only one crutch - I forcefully call this event:

const visualViewport = window.visualViewport;

if (visualViewport){
visualViewport.addEventListener(“resize”, (event) => {
window.dispatchEvent(new Event(‘resize’));
});
} else{
alert(“no visual viewpor!!”);
}

#3

did you try this

viewportMeta.setAttribute(‘content’, ‘width=1024’)

#4

This does not work correctly for mobile devices.
I use letterbox.
And to preserve the quality of images and text (which is also an image) I have to set the initial scale.
I tried different options manually and the method described above turned out to be the most correct (but not for laptops, etc.)