Seite auf Tablet nicht reaktionsfähig

Hallo,
Ich habe festgestellt, dass meine Website auf meinem Tablet nicht responsiv ist. Sie ist jedoch responsiv, wenn ich die Plugins im abgesicherten Modus deaktiviere. Ich habe nur offizielle Plugins auf meiner Website.

Ich habe die folgenden Plugins auf meiner Website:

Das Problem ist auf Meta nicht sichtbar. Ich glaube, das liegt daran, dass Meta das discourse-adplugin nicht verwendet.

Website wie auf dem Tablet gesehen:

Könnten Sie versuchen, Ihren Adblocker zu deaktivieren oder den Inkognito-Modus zu verwenden, um zu sehen, ob das einen Unterschied macht?

Habe das gleiche Problem auch im Inkognito-Modus.

Ich vermute, das hat etwas mit der neuen Seitenleiste zu tun, denn wenn ich das Hamburger-Menü benutze, um die Seitenleiste auszublenden, wird die Seite responsiv und passt sich perfekt an den Bildschirm an.

1 „Gefällt mir“

Ich habe leider kein Tablet, um das selbst zu testen, aber könnten Sie versuchen, die Seitenleiste zu deaktivieren, indem Sie die Admin-Einstellungen enable experimental sidebar hamburger und enable sidebar deaktivieren, und sehen, ob das kurzfristig hilft:

1 „Gefällt mir“

Ja, wenn ich die beiden Sidebar-Einstellungen deaktiviere, wird die Website wieder responsiv und passt sich dem Bildschirm an. Das Problem hängt mit der Sidebar zusammen.

Hallo,

Ich kann es auf Ihrer Website reproduzieren. Ich denke, das liegt daran, dass die oberen Anzeigen eine feste Breite haben. Ich bin mir nicht sicher, ob es möglich ist, einen responsiven Anzeigentyp auszuwählen? :thinking: oder die Breite per CSS festzulegen. Wahrscheinlich benötigen die Discourse-Anzeigen ein Update, um besser mit der Seitenleiste zu funktionieren… oder haben Sie Änderungen an den Anzeigen vorgenommen?

1 „Gefällt mir“

Das sehe ich auf meinem iPad Pro, nur damit Sie es wissen.

Lassen Sie mich wissen, ob ich es nach dem Umschalten von Einstellungen erneut versuchen soll. :+1:

Adblocker aktiv



Adblocker inaktiv



2 „Gefällt mir“

Können Sie versuchen, dies zu einer neuen oder bestehenden Theme-Komponente hinzuzufügen, um zu sehen, wie dies funktioniert?

Desktop / CSS

@media screen and (max-width: 1000px) {
  .google-adsense .google-adsense-content {
    width: 100% !important;
  }
}
2 „Gefällt mir“

Ich habe das CSS hinzugefügt. Jetzt habe ich das Problem nicht mehr auf der Hauptseite, aber ich habe das Problem auf allen Seiten.

Ich habe keine Änderungen an den Anzeigen vorgenommen. Ich verwende Anzeigen mit fester Größe über der Themenliste im AdSense-Plugin.

1 „Gefällt mir“

Ich habe die Einstellungen umgeschaltet. Können Sie es bitte noch einmal versuchen?

Keine offensichtlichen Unterschiede bemerkt, vielleicht wegen des Caching?

Adblocker aktiv



Adblocker inaktiv



Ich verstehe. Ich denke, das Problem liegt bei Anzeigen mit fester Breite. Wenn Sie zum Beispiel die Website mit einer eingeklappten Seitenleiste öffnen und dann die Seitenleiste öffnen, werden auch die Vollbildanzeigen nach rechts gezogen und die Anzeigenbreite erst nach einem vollständigen Seitenrefresh aktualisiert.

Leider kann ich das jetzt nicht auf meiner Testseite ausprobieren.

Aber ich kann mir vorstellen, dass so etwas auch für die anderen Anzeigen funktionieren könnte. Können Sie versuchen, den vorherigen Code wie folgt zu ändern?

@media screen and (max-width: 1110px) {
  .google-adsense .google-adsense-content {
    width: 100% !important;
    .adsbygoogle {
      width: 100% !important;
      > div {
        width: 100% !important;
      }
    }
  }
}
1 „Gefällt mir“

Ich habe das vorherige CSS mit dem neuen geändert. Aber ich habe immer noch das gleiche Problem auf allen Seiten, aber nicht auf der Hauptseite. Ich habe auch versucht, den Cache zu leeren, aber das Gleiche.

1 „Gefällt mir“

Tut mir leid, das war im Moment mein bester Tipp, aber zumindest wissen wir jetzt, dass die Anzeigen das verursachen. Ich denke, Sie können den Code entfernen, um sicherzugehen, dass er nicht mit zukünftigen Korrekturen kollidiert. :slightly_smiling_face:

1 „Gefällt mir“

Vielen Dank für die Hilfe. Ich hoffe, jemand behebt dieses Problem bald.

1 „Gefällt mir“

Ich habe festgestellt, dass Meta das gleiche Problem auf allen Seiten hat.

1 „Gefällt mir“

Hallo, oh ja, ich kann das reproduzieren. Es scheint, dass die maximale Breite des unteren .loading-container unter 790px dies bei geöffnetem Sidebar auf Themenseiten verursacht.

Wahrscheinlich wäre es gut, wenn --d-sidebar-width zur Kernberechnung hinzugefügt wird, wenn .has-sidebar-page verfügbar ist?

Aber ich denke, Sie werden auf dieser Bildschirmgröße auf Mobilgeräten eine bessere Erfahrung haben.

Zusammenfassung:

Auf der neuesten Seite verursacht die feste Breite der oberen Anzeige dies und auf den oben genannten Themenseiten.

Diese schnelle Korrektur sollte für Sie funktionieren.

Desktop / CSS

.google-adsense .google-adsense-content {
  max-width: 100%;
  .adsbygoogle {
    max-width: 100%;
    > div {
      max-width: 100%;
    }
  }
}

@media all and (max-width: 790px) {
  body.has-sidebar-page {
    .topic-area > .loading-container {
      max-width: calc(100vw - var(--d-sidebar-width) - 32px);
    }
  }
}
2 „Gefällt mir“

Danke, Don. Jetzt ist die Website responsiv und funktioniert wie erwartet auf meinem Tablet. Ich hoffe, die Discourse-Mitarbeiter werden diesen Fehler auch auf Meta beheben.

1 „Gefällt mir“