Der Header auf Horizon funktioniert in den meisten Fällen sowohl auf mobilen Geräten als auch auf dem Desktop sehr gut:
Allerdings habe ich ein faltbares Telefon mit einem ungewöhnlichen Seitenverhältnis. Leider verschwinden die Suchleiste und das Avatar-Bild, und alles gerät etwas durcheinander:
Dies scheint für eine Breite von 640–767 px zu gelten – genau dort, wo mein faltbares Gerät liegt!
Ich kann das ebenfalls reproduzieren – das Problem scheint darin zu liegen, dass die Klasse contents innerhalb des Headers im Viewport für faltbare Smartphones/kleine Tablets flex anzeigt: @media (min-width: 640px) and (max-width: 767px):
Es lässt sich beheben, indem die Eigenschaft für diesen Breitenbereich auf contents geändert wird:
@media (min-width: 640px) and (max-width: 767.98px) {
.d-header>.wrap .contents {
display: contents!important;
}
}
Ich glaube, Discourse verwendet 768px als Grenze zwischen Tablet und Desktop.
Ich finde, diese Einstellung macht es jedoch noch schlimmer!! Wenn sie deaktiviert ist, ist der Header bei allen Größen bis 767 durcheinander, es sei denn, das Gerät wird als Mobilgerät angegeben.
Aber zumindest ist mein faltbares Smartphone zufrieden. Nur mein Desktop-Browser nicht, wenn die Dinge klein werden.
Ich glaube, diese Einstellung ist inzwischen verschwunden, sodass es keine Umgehungslösung mehr gibt.
Das Problem besteht bei Horizon weiterhin.
Könnten Sie mir helfen, dies zu diagnostizieren? Denn wenn ich es derzeit über die Desktop-Simulation reproduziere (ich habe kein faltbares Telefon), sehe ich nichts Ungewöhnliches.
Ich kann das Problem einfach reproduzieren, indem ich das Fenster meines Desktop-Browsers verkleinere:
Ah – ich hatte vergessen, dass ich das für Reproduktionszwecke tun kann! Nein, es lässt sich bei mir mit Meta und Horizon ebenfalls nicht reproduzieren.
Ich nehme an, das ist dann ein Problem mit meiner Website – ich werde es auf meiner Seite untersuchen und dir mitteilen, was ich herausfinde. Vielen Dank, dass du dich damit beschäftigt hast!!!
Wow, es war überraschend einfach, das Problem zu finden.
Dieses Theme-Component ist nicht mit Horizon kompatibel:
Und ich liebe dieses TC!! Ich kann nicht ertragen, dass das Menü auf dem Handy nach rechts springt. Es sind die kleinen Dinge, die uns verrückt machen (nun, bei manchen von uns), oder? Vielleicht mag ich es dort, weil ich linkshändig bin.
Ja, das verstehe ich.
Fühl dich frei, eine Nachricht im ursprünglichen Horizon Theme-Thread zu hinterlassen, wo wir sagten:
Ich verwende diese Komponente auch (ich empfinde das Gleiche bezüglich des Sidebar-Icons, auch wenn ich Horizon nicht mag oder verwende) und habe an dieser Komponente gearbeitet. Ich schaue, ob ich das für dich reparieren kann, Nathan.
hey Nathan, hier habe ich eine Lösung:
Lilly, du rockst! Genieße gerade sowohl mein Hamburger-Left-Side-Setup ALS AUCH Horizon auf meinem Foldie.
Wunderbar!!!
