Consegui fazer com que ele exibisse a visualização móvel no Chrome, mas ainda não consigo fazê-lo exibir no modo móvel nos navegadores Firefox, Edge ou Brave.
Preciso de pontos de interrupção (Viewport break points) em todo o meu código móvel? Preciso colocá-lo na seção Móvel? A maior parte do meu CSS móvel são apenas alterações de cor, ícones de cabeçalho e largura da barra lateral, tamanhos de emoji/fonte. Portanto, não parece que eu precise de configurações de viewport específicas.
Consegui corrigir o código que eu precisava:
/* ==========================================================================\n MENU SUSPENSO MÓVEL - ESTADO ATIVO\n ========================================================================== */
/* 1. Força o texto do link ativo para preto */
.d-modal__body .dropdown-menu li.active a,
.d-modal__body .dropdown-menu li.active {
color: #000000 !important;
}
/* 2. Feedback específico para toque (Padrão Discourse) */
html.discourse-touch {
/* Torna o texto preto enquanto o dedo está pressionando */
.d-modal__body .dropdown-menu li a:active {
color: #000000 !important;
}
}
/* 3. Garante que outros itens de navegação sigam a regra */
.dropdown-menu li a {
transition: color 0.1s ease;
}