iOS Safari Browser lädt mobile Version einer Theme-Komponente nicht?

Unterstützung
1

Ich habe eine Theme-Komponente, sie hat CSS und Head für Desktop und Mobilgeräte definiert.

Auf Mobilgeräten ist eine Form für mehr Platz kleiner definiert.

Sie funktioniert gut in Chrome, Firefox auf dem iPhone, aber in Safari wird stattdessen die Desktop-Version geladen.
Der Safari-Browser lädt nicht die Desktop-Version der Website.
Hat jemand dieses Problem gesehen? Meldet sich iOS Mobile Safari nicht als mobiler Browser? Oder…

Danke

2

Bestätigen Sie zuerst, dass Sie durch Erzwingen der mobilen Ansicht Folgendes am Ende der URL einfügen:

https://example.com?mobile_view=1

Das Problem ist möglicherweise nicht das, was Sie denken …

Sie sollten auch angeben, welche Safari-Version Sie verwenden?

1 „Gefällt mir“
3

Danke @merefield

  • Es ist Safari auf iOS 17.1.2, wenn die Komponente geladen wird, zeigt sie die für Desktops definierte große Form an
    Ich habe iOS gerade auf die neueste Version 17.2.1 aktualisiert, dasselbe.
  • Auf demselben Gerät, wenn es mit Chrome oder Firefox geöffnet wird, zeigt es die für Mobilgeräte definierte kleine Form an
  • Im Desktop-Browser, wenn Sie es unter https://example.com?mobile_view=1 anzeigen, wird die für Mobilgeräte definierte kleine Form angezeigt.

Ich vermute, dass mein Safari-Browser etwas lädt, das Desktop-Inhalte lädt, aber das ist nicht der Fall, sagen wir, es lädt die mobilen Layouts, nicht die Desktop-Version.
Ich habe das vorher nicht bemerkt, vielleicht habe ich auf dem iPhone meistens Chrome benutzt…

Um das zu reproduzieren, habe ich diese vereinfachte Version erstellt, um das Problem zu zeigen.

  • Dieser Beispielcode unten zeigt im Grunde einen großen roten Kreis im Desktop-Browser, einen kleineren im mobilen Browser.
  • Nach der Installation dieser Komponente können Sie sehen
    Es zeigt den kleinen Kreis auf dem iPhone Chrome/Firefox, das ist erwartet
    Aber einen großen mit Safari, wie für Desktop-Browser definiert. Das ist nicht erwartet
  • Erstellen Sie eine Themenkomponente, fügen Sie die unten stehenden Inhalte hinzu
    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;      // größere Größe !!!
    height: 90px;       // größere Größe !!!
    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;   // kleinere Größe!!!!!!
    height: 45px;   // kleinere Größe !!!!!
    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 „Gefällt mir“
4

Ich schlage vor, dies auf GitHub zu verpacken, damit es für die Leute super einfach ist, es zu bestätigen…

5

Was passiert, wenn Sie diese Query-Zeichenkette im mobilen Safari-Browser eingeben?

6

auf diese Weise mit ?mobile_view=1 wird die mobile Version im iPhone-Safari-Browser geladen
hmm…

werde es in ein Repository stellen, um es einfach auszuprobieren/zu debuggen… danke für Ihre Hilfe!

7

Ah, und vorher war das nicht so? Das ist interessant!

Unter 17.3 (PB) sehe ich die mobile Version meines TC auf meinem iPhone 11, ohne dass ich sie erzwingen muss (mit dieser querystring).