Какой браузер корректно отображает мобильную версию?

Поддержка
6

Мне удалось заставить отображаться мобильный вид в Chrome, но в Firefox, Edge или Brave браузеры по-прежнему не показывают мобильную версию.

Мне нужны точки перелома Viewport во всём моём мобильном коде? Нужно ли размещать их в разделе «Мобильный»? Большая часть моего мобильного CSS — это просто изменения цветов, иконки в заголовке, ширина боковой панели, размеры эмодзи и шрифтов. Поэтому, кажется, мне не нужны какие-либо специфические настройки Viewport.

image
image642×369 13.5 KB

Мне удалось исправить необходимый код:

/* ==========================================================================
   МОБИЛЬНОЕ ВЫПАДАЮЩЕЕ МЕНЮ - АКТИВНОЕ СОСТОЯНИЕ
   ========================================================================== */

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

У меня были запросы @media в CSS, которые, похоже, мешали правильной загрузке браузера Brave на мобильных устройствах.