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.