Why is the page zoom-in even though the viewport is set to initial-scale=1.0?

Question

css

Good day! I am currently working on the layout of an adaptive landing page and faced such a problem. If you open this page in a browser of a mobile device, then the page is immediately in an enlarged state when it is first loaded, despite the fact that the following standard viewport is set:

<meta name='viewport' content='width=device-width, initial-scale=1.0'/>

And you have to manually reduce it.
If you set this viewport:

<meta name='viewport' content='width=device-width, maximum-scale=1.0'/>

then the page ( link ) behaves as it should, and the width is adjusted to the width of the device (and scaling also works).
I would be very grateful if experts in this field will tell you why exactly this is happening, and what is my mistake.
Thanks in advance for your reply!

Answer 1

initial-scale - sets the scaling of the page on load (i.e. initial-scale=1 says that the page is rendered without scaling). In your case, the layout naturally does not fit into the scale.
maximum-scale - Sets the maximum page scaling. In your case, the initial-scale is selected according to the width of the screen.
Regarding scalability - can you clarify in which browser it works? In Chrome emulators, scaling did not work for me.
Yes, Chrome for Android does set initial-scale to fit the screen width. And scaling works exactly up to scale=1.
windows phone - when loading showed the same result - the page is immediately enlarged, but with maximum-scale it no longer gives zoom