우리의 디자이너는 이 (매우 유용하고 멋진) 애드온의 반응형 부분에서 몇 가지 문제를 겪고 있으며, 현재 vdo 요소에서 vmo 요소로 전환되는 브레이크포인트를 변경할 수 있는지 묻고 있습니다.
이것이 가능한가요? 감사합니다
우리의 디자이너는 이 (매우 유용하고 멋진) 애드온의 반응형 부분에서 몇 가지 문제를 겪고 있으며, 현재 vdo 요소에서 vmo 요소로 전환되는 브레이크포인트를 변경할 수 있는지 묻고 있습니다.
이것이 가능한가요? 감사합니다
네. 테마 컴포넌트를 포크해서 수정하면 됩니다.
감사합니다. 확인해 봤는데 거기에는 없네요… 해당 메뉴에만 적용되는 것이 아니라 사이트 전체에 적용되는 어떤 Discourse 설정에 의존하고 있는 것 같네요.
어쨌든 CSS 미디어 쿼리를 사용해 작동하도록 했습니다. 이상적이지는 않지만, 이 정도면 괜찮습니다.
vdo(데스크톱 전용 보기)에서 vmo(모바일 전용 보기)로의 전환은 뷰포트의 폭이 아니라 브라우저의 사용자 에이전트(user-agent)를 기반으로 이루어집니다.
Discourse에서는 다른 웹사이트에서 익숙해져 있는 것만큼 CSS 미디어 쿼리가 중요하지 않습니다.
Discourse는 사용자가 사용하는 기기에 따라 최적화된 마크업을 제공합니다.
즉, CSS 미디어 쿼리에 대해 크게 걱정할 필요가 없습니다. 디자이너는 테스트하는 URL에 ?mobile_view=1을 추가하거나, 데스크톱에서 테스트/디버깅할 때 모바일 사용자 에이전트를 사용해야 합니다.
흥미롭네요
설명해 주셔서 감사합니다.
하지만 데스크톱에서 브라우저 창 크기를 조정해 보면 Discourse가 화면의 레이아웃을 반응적으로 재배치하는 것을 볼 수 있습니다. _그것_은 사용자 에이전트 문자열에서 비롯된 것이 아니라, 화면 크기에 반응하는 다른 메커니즘이 있는 것 같습니다.
예를 들어: 오른쪽에 있는 타임랩스 스크롤 바는 폭이 좁아지면 사라지고, 19 / 24처럼 게시글 번호와 총 개수만 표시되는 더 작은 지표로 대체됩니다.
말씀하신 대로입니다.
창 크기를 충분히 줄이면 Discourse는 요소를 이동합니다. 이는 다양한 데스크톱/노트북 화면 크기에 대응하기 위한 조치입니다.
하지만 여기서 핵심은 그 점이 아닙니다. 뷰포트(Viewport)를 줄이는 것만으로는 사용자 에이전트가 변경되지 않습니다. 이는 사용자가 사용하는 기기의 사용자 에이전트에만 완전히 기반하기 때문입니다.
데스크톱에서 창/화면 폭을 변경하면 Discourse는 합리적인 범위 내에서 그에 맞게 조정됩니다.
그러나 데스크톱에서 모바일 환경의 Discourse 모습을 테스트하려는 경우, 위에서 언급했듯이 URL에
을 추가하거나 모바일 기기로 테스트해야 합니다.