Il browser Safari di iOS non carica la versione mobile di un componente del tema?

Supporto
1

Ho un componente tematico, ha css e Head definiti sia per desktop che per mobile.

su mobile, una forma è definita più piccola per spazio.

funziona bene su chrome, firefox su iphone, ma su safari, carica invece la versione desktop.
il browser safari non carica la versione desktop del sito.
qualcuno ha riscontrato questo problema? safari mobile iOS non si segnala come browser mobile? o…

grazie

2

Prima conferma che forzando la visualizzazione mobile, aggiungi questo alla fine dell’URL:

https://example.com?mobile_view=1

Il problema potrebbe non essere quello che pensi…

Dovresti anche indicare quale versione di Safari stai usando?

1 Mi Piace
3

grazie @merefield

  • è Safari su iOS 17.1.2, quando carica il componente, mostra la forma grande definita per Desktop
    ho appena aggiornato iOS all’ultima versione 17.2.1, uguale.
  • sullo stesso dispositivo, se lo apro usando Chrome o Firefox, mostra la forma piccola definita per Mobile
  • sul browser desktop, se lo visualizzo https://example.com?mobile_view=1, mostra la forma piccola definita per Mobile.

Sospetto che ci sia qualcosa nel mio browser Safari che carica il contenuto desktop, ma non è così, diciamo che carica i layout mobili, non la versione desktop.
non l’avevo notato prima, forse usavo principalmente Chrome sull’iPhone…
per riprodurlo, ho creato questa versione semplificata per mostrare il problema.

  • questo codice di esempio qui sotto mostra fondamentalmente un grande cerchio rosso nel browser desktop, uno più piccolo nel browser mobile.
  • dopo aver installato questo componente, potrai vedere
    mostra il piccolo cerchio su iPhone Chrome/Firefox, questo è previsto
    ma uno grande con Safari, come definito per il browser desktop. questo non è previsto
  • crea un componente tema, aggiungi i contenuti qui sotto
    image
    image999×567 55.6 KB

Desktop

CSS

.deng-box1 {
    position: fixed;
    top: -30px;
    left: 180px;
    z-index: 1999;
}
 
.deng-box1 .deng {
    position: relative;
    width: 120px;      // dimensione più grande !!!
    height: 90px;       // dimensione più grande !!!
    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>

Mobile

CSS


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

.deng-box-mobile .deng {
    position: relative;
    width: 60px;   // dimensione più piccola!!!!!!
    height: 45px;   // dimensione più piccola !!!!!
    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>
1 Mi Piace
4

Suggerisco di impacchettare questo su GitHub per rendere le cose super facili da verificare…

5

Cosa succede se inserisci questa stringa di query nel browser mobile di Safari?

6

in questo modo con ?mobile_view=1, carica la versione mobile nel browser Safari dell’iPhone
hmm…

lo metterò in un repository per facilitare il tentativo/debug… grazie per il tuo aiuto!

7

Ah, e prima non lo era? È interessante!

Sotto la 17.3 (PB) vedo la versione mobile del mio TC sul mio iPhone 11 senza doverla forzare (con quella querystring)