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;
}