Le navigateur Safari d'iOS ne charge pas la version mobile d'un composant de thème ?

Soutien
1

J’ai un composant de thème, il a du CSS et un Head définis pour le bureau et le mobile.

Sur mobile, une forme est définie plus petite pour l’espace.

Cela fonctionne bien sur Chrome, Firefox sur iPhone, mais sur Safari, il charge la version de bureau à la place.
Le navigateur Safari ne charge pas la version de bureau du site.
Quelqu’un a-t-il vu ce problème ? Safari mobile iOS ne se signale pas comme un navigateur mobile ? ou …

Merci

2

Confirmez d’abord qu’en forçant la vue mobile, vous ajoutez ceci à la fin de l’URL :

https://example.com?mobile_view=1

Le problème n’est peut-être pas celui que vous pensez…

Vous devriez également indiquer quelle version de Safari vous utilisez ?

1 « J'aime »
3

merci @merefield

  • il s’agit de Safari sur iOS 17.1.2, lorsque le composant se charge, il affiche la grande forme définie pour le bureau
    j’ai juste mis à jour iOS vers la dernière version 17.2.1, pareil.
  • sur le même appareil, si je l’ouvre en utilisant Chrome ou Firefox, il affiche la petite forme définie pour le mobile
  • sur un navigateur de bureau, si je le visualise https://example.com?mobile_view=1, il affiche la petite forme définie pour le mobile.

Je soupçonne que quelque chose dans mon navigateur Safari charge le contenu du bureau, mais ce n’est pas le cas, disons qu’il charge les mises en page mobiles, pas la version de bureau.
je n’avais pas remarqué cela auparavant, peut-être que j’utilisais Chrome la plupart du temps sur iPhone…
pour reproduire, j’ai créé cette version simplifiée pour montrer le problème.

  • cet exemple de code ci-dessous montre essentiellement un grand cercle rouge dans un navigateur de bureau, un plus petit dans un navigateur mobile.
  • après avoir installé ce composant, vous pourrez voir
    il affiche le petit cercle sur iPhone Chrome/Firefox, c’est attendu
    mais un grand avec Safari, tel que défini pour le navigateur de bureau. ce n’est pas attendu
  • créez un composant de thème, ajoutez le contenu ci-dessous
    image
    image999×567 55.6 KB

Bureau

CSS

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

Tête


<div>
    <div>
    </div>
</div>

Mobile

CSS


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

.deng-box-mobile .deng {
    position: relative;
    width: 60px;   // plus petite taille!!!!!!
    height: 45px;   // plus petite taille !!!!!
    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);
}

Tête


<div>
    <div>
    </div>
</div>
1 « J'aime »
4

Je suggère de packager cela sur GitHub pour que les gens puissent facilement corroborer…

5

Que se passe-t-il si vous ajoutez cette chaîne de requête au navigateur mobile Safari ?

6

de cette façon avec ?mobile_view=1, il charge la version mobile dans le navigateur Safari de l’iPhone
hmm…

je vais le mettre dans un dépôt pour qu’il soit facile à essayer/déboguer… merci pour votre aide !

7

Ah, et avant ce n’était pas le cas ? C’est intéressant !

Sous la version 17.3 (PB), je vois la version mobile de mon TC sur mon iPhone 11 sans avoir besoin de la forcer (avec cette querystring).