Почему медиа-запросы не работают для iOS устройств в WordPress?

Question

В настоящее время мы работаем над следующим шаблоном под названием Zackra, и в настоящее время я использую wp-engine в качестве основного компоновщика. В настоящее время у меня возникает ситуация, когда я создаю несколько медиа-запросов для мобильных устройств, и этот код работает на устройствах Android, но не работает на устройствах iOS. По этой причине мне интересно, если у вас есть проблема с частью CSS вашего кода или это что-то еще, что влияет на устройства iOS.

Веб-сайт: Yournextfence.com Затрагиваемое изображение: заголовок с yournextfence.com

Шаги, которые я предпринял для создания медиазапросов:

Минимальная ширина устройства: 350 пикселей Максимальная ширина устройства: 768 пикселей. Минимальная ширина устройства: 350 пикселей. Максимальная ширина устройства: 812 пикселей. Минимальная ширина устройства: 375 пикселей. Максимальная ширина устройства: 667 пикселей.

Ссылки, откуда я захватил размеры: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Я проверил это с несколькими браузерами:

Chrome Safari Mozilla

Я очистил кэш и куки, и я проверил консоль из инструментов chrome, и у нас нет проблем, связанных с css.

Вот как следует искать: https://screencast.com/t/4wr5lHytT9y

Вот как это выглядит прямо сейчас: https://screencast.com/t/9NVUDxKxhK

CSS Код, который я использовал:

    @media only screen and (min-width: 350px) and (max-width: 768px) {
.background-image-main {
        background-image: url(https://www.yournextfence.com/wp-content/uploads/2019/07/1-after.jpg);
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-attachment: fixed;
}
        .background-image-seclusions {
        background-image: url(https://www.yournextfence.com/wp-content/uploads/2017/01/trexlehiedit35.jpg)!important;
             background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-attachment: fixed !important;
        }
        .background-image-horizons {
        background-image: url(https://www.yournextfence.com/wp-content/uploads/2017/01/Trex-Horizons-Winchester-Grey-2.jpg)!important;
             background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-attachment: fixed !important;
        }
        .background-image-trex-gates {
        background-image: url(https://www.yournextfence.com/wp-content/uploads/2018/10/Trex-Seclusions-Fencing-with-Gate.jpg)!important;
             background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-attachment: fixed !important;
        }
        .background-image-trex-posts {
        background-image: url(https://www.yournextfence.com/wp-content/uploads/2017/01/Trex-With-IronGuard-15.jpg)!important;
             background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-attachment: fixed !important;
        }
}

@media only screen 
  and (min-device-width: 350px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3) { 
.background-image-main {
        background-image: url(https://www.yournextfence.com/wp-content/uploads/2019/07/1-after.jpg);
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-attachment: fixed !important;
}
        .background-image-seclusions {
        background-image: url(https://www.yournextfence.com/wp-content/uploads/2017/01/trexlehiedit35.jpg)!important;
             background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-attachment: fixed !important;
        }
        .background-image-horizons {
        background-image: url(https://www.yournextfence.com/wp-content/uploads/2017/01/Trex-Horizons-Winchester-Grey-2.jpg)!important;
             background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-attachment: fixed !important;
        }
        .background-image-trex-gates {
        background-image: url(https://www.yournextfence.com/wp-content/uploads/2018/10/Trex-Seclusions-Fencing-with-Gate.jpg)!important;
             background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-attachment: fixed !important;
        }
        .background-image-trex-posts {
        background-image: url(https://www.yournextfence.com/wp-content/uploads/2017/01/Trex-With-IronGuard-15.jpg)!important;
             background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-attachment: fixed !important;
        }
}


/* Iphone X in potrait */

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 
.background-image-main {
        background-image: url(https://www.yournextfence.com/wp-content/uploads/2019/07/1-after.jpg)!important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-attachment: fixed !important;
}
}

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 
.background-image-main {
        background-image: url(https://www.yournextfence.com/wp-content/uploads/2019/07/1-after.jpg)!important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-attachment: fixed !important;
}
}