Why is text with viewport tag acting weird?

Question

css

I designed the site, using media queries and rem made it adaptive and was pleased with my work. But then I asked myself the question of seo-optimization, and Yandex tells me:
The site is not optimized for mobile devices.
I tried to add different variations of the viewport tag:

<meta name="viewport" content="width=device-width, initial-scale=1">
<!--или-->
<meta name="viewport" content="width=device-width">
<!--или-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

But the text seemed to stop shrinking when switching to mobile resolutions. It began to increase and not fit into resolutions like 480x640. I didn’t google anything and I’m very interested in what it is.
Without viewport:

With viewport: