Text size changes on iPhones

Question

Good day. I have such a question, I wrote an adaptive for the site, everything was fine. But when I launched the site on an iPhone, my main headings got smaller. Although in chrome on pc, font size is normal at all sizes. Below I am attaching screenshots.

Body styles have:

-webkit-text-size-adjust: none;

Tried 100% instead of "none". The result is the same

In chrome

In iPhone

Answer 1

Try using @media queries. If the screen width goes below 450, change the font size:

@media screen and (max-width: 450) {
  h1{
    font-size: <x>%;
  }
}