Habe Edge, Firefox, Brave und Chrome ausprobiert. Keiner von ihnen zeigt die korrekte mobile Ansicht an. Ich versuche, das mobile Dropdown-Menü zu ändern, aber es wird dieses Desktop-Ansichtsmenü angezeigt.
Auf meinem iPhone Safari und Chrome werden sie korrekt angezeigt.
Der übliche Weg war, ?mobile_view=1 am Ende der URL hinzuzufügen. Discourse bewegt sich in Richtung eines responsiven Designs, das auf der Größe des Viewports basiert. Daher funktioniert diese Überschreibung je nach Theme möglicherweise nicht mehr.
Beziehen Sie sich auf die Website-Einstellung navigation menu?
Ich glaube tatsächlich, dass dies leider vor ein paar Tagen entfernt wurde:
ja, der ?mobile_view=1 ist veraltet und gilt als veraltet – das neuere mobile Styling wurde letztes Jahr aktiviert:
Ich bin mir nicht sicher, welche Anpassungen Sie in Ihrem eigenen Forum vorgenommen haben, aber ich kann dieses Problem auf keiner Instanz oder Gerät reproduzieren. Tritt es im abgesicherten Modus auf?
Es ist mir gelungen, die mobile Ansicht in Chrome anzeigen zu lassen, aber ich kann sie immer noch nicht in Firefox, Edge oder Brave Browser als mobil anzeigen lassen.
Benötige ich Viewport-Breakpoints in meinem gesamten mobilen Code? Muss ich ihn im mobilen Bereich platzieren? Die meisten meiner mobilen CSS-Änderungen betreffen nur Farbänderungen, Header-Symbole und die Breite der Seitenleiste, Emoji-/Schriftgrößen. Es scheint also nicht so, als ob ich spezifische Viewport-Einstellungen benötigen würde.
Ich konnte den benötigten Code korrigieren:
/* ==========================================================================\n MOBILES-DROPDOWN-MENÜ - AKTIVER ZUSTAND\n ========================================================================== */
/* 1. Erzwinge, dass der aktive Linktext schwarz ist */
.d-modal__body .dropdown-menu li.active a,
.d-modal__body .dropdown-menu li.active {
color: #000000 !important;
}
/* 2. Touch-spezifisches Feedback (Discourse Standard) */
html.discourse-touch {
/* Text beim Herunterdrücken des Fingers schwarz färben */
.d-modal__body .dropdown-menu li a:active {
color: #000000 !important;
}
}
/* 3. Stelle sicher, dass andere Navigationselemente der Regel folgen */
.dropdown-menu li a {
transition: color 0.1s ease;
}