어떤 브라우저가 올바른 모바일 화면을 로드하나요?

지원
6

Chrome에서는 모바일 뷰가 표시되도록 해결했지만, Firefox, Edge, Brave 브라우저에서는 아직 모바일 뷰가 표시되지 않습니다.

모바일 코드 전체에 Viewport break points가 필요한가요? 모바일 섹션에 배치해야 하나요? 제 모바일 CSS의 대부분은 색상 변경, 헤더 아이콘, 사이드바 너비, 이모지/폰트 크기 조정 정도입니다. 그래서 특정 viewport 설정이 필요하지 않을 것 같습니다.

image
image642×369 13.5 KB

필요했던 코드를 수정했습니다:

/* ==========================================================================
   MOBILE DROPDOWN MENU - ACTIVE STATE
   ========================================================================== */

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

Brave 브라우저에서 모바일로 올바르게 로드되지 않도록 간섭을 일으키던 @media CSS 쿼리가 몇 개 있었습니다.