Подстроить размер изображения под мобильную версию

Делаю проект под декстопную и мобильную версию. Столкнулся с проблемой, что в девтулс для мобильной версии все выглядит отлично, а при открытии сайта на iphone главное изображение отображается только на 1/4. Подскажите какие свойства необходимо добавить, чтобы изображение сохраняло заданную пропорциональность при просмотре сайта на телефоне.

Вот свойства, которые я задал изображению:

.main-page__background {
  background-image: url("../../../images/main.jpg");
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  transition: opacity 0.4s;
  background-color: #2a2c2f;
  box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 50%);
}