Chromeでモバイル表示にすることはできましたが、Firefox、Edge、Braveブラウザではまだモバイル表示にできません。
ビューポートのブレークポイントをすべてのモバイルコードに設定する必要がありますか？モバイルセクションに配置する必要がありますか？モバイルCSSのほとんどは、色の変更、ヘッダーアイコン、サイドバーの幅、絵文字/フォントサイズのみです。そのため、特定のビューポート設定は必要ないようです。
必要なコードを修正できました。
/* ==========================================================================\n モバイルドロップダウンメニュー - アクティブ状態\n ========================================================================== */
/* 1. アクティブなリンクテキストを黒に強制する */
.d-modal__body .dropdown-menu li.active a,
.d-modal__body .dropdown-menu li.active {
color: #000000 !important;
}
/* 2. タッチ固有のフィードバック (Discourse標準) */
html.discourse-touch {
/* 指が押されている間、テキストを黒にする */
.d-modal__body .dropdown-menu li a:active {
color: #000000 !important;
}
}
/* 3. 他のナビゲーション項目がルールに従うことを確認する */
.dropdown-menu li a {
transition: color 0.1s ease;
}