Браузер Safari на iOS не загружает мобильную версию компонента темы?

Поддержка
1

У меня есть компонент темы, в котором определены CSS и Head как для десктопа, так и для мобильных устройств.

На мобильных устройствах форма определена меньше для экономии места.

Это работает отлично в Chrome и Firefox на iPhone, но в Safari загружается десктопная версия.

Браузер Safari не загружает десктопную версию сайта.

Кто-нибудь сталкивался с этой проблемой? iOS Safari не определяет себя как мобильный браузер или что-то другое?

Спасибо.

2

Сначала подтвердите, что принудительный переход в мобильный вид осуществляется путем добавления в конец URL-адреса следующего:

https://example.com?mobile_view=1

Проблема может быть не в том, о чем вы думаете…

Также укажите, какую версию Safari вы используете?

3

Спасибо, @merefield

  • Это Safari на iOS 17.1.2. При загрузке компонента отображается большая форма, предназначенная для десктопа.
    Только что обновил iOS до последней версии 17.2.1 — результат тот же.
  • На том же устройстве, если открыть страницу через Chrome или Firefox, отображается маленькая форма, предназначенная для мобильных устройств.
  • На десктопном браузере, если открыть страницу по адресу https://example.com?mobile_view=1, отображается маленькая форма для мобильных устройств.

Я подозревал, что мой браузер Safari загружает контент для десктопа, но это не так: он загружает макеты для мобильных устройств, а не для десктопа.
Раньше я этого не замечал, возможно, я чаще использовал Chrome на iPhone…

Чтобы воспроизвести проблему, я создал упрощённую версию, демонстрирующую эту ошибку.

  • Приведённый ниже пример кода отображает большой красный круг в десктопном браузере и меньший — в мобильном.
  • После установки этого компонента вы увидите:
    • на iPhone в Chrome/Firefox отображается маленький круг, как и ожидалось;
    • но в Safari отображается большой круг, как для десктопного браузера, что не соответствует ожиданиям.
  • Создайте компонент темы и добавьте следующий контент:
    image
    image999×567 55.6 KB

Десктоп

CSS

.deng-box1 {
    position: fixed;
    top: -30px;
    left: 180px;
    z-index: 1999;
}
 
.deng-box1 .deng {
    position: relative;
    width: 120px;      // больший размер !!!
    height: 90px;       // больший размер !!!
    margin: 50px;
    background: #d8000f;
    background: rgba(216, 0, 15, 0.8);
    border-radius: 50% 50%;
    -webkit-transform-origin: 50% -100px;
    -webkit-animation: swing 5s infinite ease-in-out;
    animation: swing 5s infinite ease-in-out;
    box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);
}

Head


<div class="deng-box1">
    <div class="deng">
    </div>
</div>

Мобильное устройство

CSS


.deng-box-mobile {
    position: fixed;
    top: 180px;
    left: -40px;
    z-index: 1999;
}

.deng-box-mobile .deng {
    position: relative;
    width: 60px;   // меньший размер!!!!!!
    height: 45px;   // меньший размер !!!!!
    margin: 50px;
    background: #d8000f;
    background: rgba(216, 0, 15, 0.8);
    border-radius: 50% 50%;
    -webkit-transform-origin: 50% -100px;
    box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);
}

Head

<div class="deng-box-mobile">
    <div class="deng">
    </div>
</div>
4

Предлагаю разместить это на GitHub, чтобы людям было максимально просто проверить…

5

Что произойдёт, если добавить эту строку запроса в мобильном браузере Safari?

6

Так, с ?mobile_view=1, в Safari на iPhone загружается мобильная версия.
хм…

добавлю это в репозиторий, чтобы было проще попробовать/отладить… спасибо за помощь!

7

А раньше этого не было? Это интересно!

В версии 17.3 (PB) я вижу мобильную версию своего TC на iPhone 11 без необходимости принудительной загрузки (с этим параметром запроса).