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

지원
1

image
image595×244 6.11 KB

Edge, Firefox, Brave, Chrome를 모두 시도해 보았습니다. 하지만 어떤 브라우저에서도 올바른 모바일 뷰가 표시되지 않습니다. 모바일 드롭다운 메뉴를 수정하려고 하는데, 데스크톱 뷰 메뉴가 표시됩니다.

iPhone의 Safari와 Chrome에서는 올바르게 표시됩니다.

2

보통은 URL 끝에 ?mobile_view=1을 추가하는 방식이었습니다. Discourse는 뷰포트 크기에 기반한 반응형 디자인으로 전환되고 있으므로, 테마에 따라 이 오버라이드가 계속 작동하지 않을 수 있습니다.

3

navigation menu 사이트 설정을 말씀하시는 건가요?

4

아쉽게도 며칠 전에 그 기능이 제거된 것 같습니다:

5

네, ?mobile_view=1은 레거시이며 비추천(deprecated)으로 간주됩니다 — 새로운 모바일 스타일링은 작년에 활성화되었습니다:

자신의 포럼에서 커스터마이징을 위해 무엇을 했는지는 정확히 알 수 없지만, 어떤 인스턴스나 기기에서도 이 문제를 재현할 수 없습니다. 안전 모드(safe mode)에서는 그런가요?

Screenshot 2026-03-07 at 7.07.32 PM
Screenshot 2026-03-07 at 7.07.32 PM1186×1224 167 KB

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 쿼리가 몇 개 있었습니다.