더 이상 모바일/데스크톱 레이아웃을 전환할 수 없나요?

안녕하세요, 저는 stable 버전을 사용하다가 이제 최신 esr 버전을 사용 중인데, 이제 모바일/데스크톱 레이아웃을 명시적으로 전환할 수 있는 기능이 없는 것 같습니다. 사이드바 왼쪽 하단에서 토글이 더 이상 보이지 않고, ?mobile_view=1 / ?mobile_view=0도 더 이상 효과가 없습니다. 이제 데스크톱 브라우저 창을 가로로 리사이즈하는 것만으로 좌측에 사이드바와 햄버거 메뉴가 있는 데스크톱 모드에서 사이드바 없이 메뉴가 오른쪽에 있는 모바일 레이아웃으로 전환됩니다. 즉, 이제 브라우저 너비에만 기반을 두는 건가요? 이전에는 원할 경우 더 넓은 태블릿 화면에서도 단순화된 모바일 레이아웃을 사용할 수 있었고, 반대로 일부 사용자는 더 많은 세부 정보가 표시되는 데스크톱 모드를 더 작은 스마트폰이나 좁은 브라우저 창에서도 선호하여 사용할 수 있었습니다.

2개의 좋아요

맞습니다. 폭 기반 브레이크포인트를 사용하는 것이 더 널리 받아들여지는 디자인 표준이기 때문에, 레이아웃을 올바르게 반응형으로 만들기 위해 레이아웃을 단순화하는 방향으로 전환해 왔습니다. 또한 유지보수가 더 쉬워졌으며, 폭 기반 레이아웃은 메인 사이트와 포럼에 걸쳐 공유 배너를 통합하는 경우와 같이 외부 디자인 요소와도 잘 조화를 이룹니다.

5개의 좋아요

이 접근 방식의 단점 중 하나는 초기화 단계에서 기기별 로직을 실행할 수 없다는 것입니다.

대표적인 예로, 모바일과 데스크톱에 서로 다른 홈페이지만 설정하는 경우를 들 수 있는데, 현재는 이를 구현할 수 없습니다.

개인적으로, 템플릿을 만드는 방식에 훨씬 더 동적인 접근이 필요할 것 같습니다.

3개의 좋아요

답변 감사합니다. 원칙적으로는 타당하지만, 실제로는 더 숙련되거나 자주 사용하는 사용자에게는 다소 문제가 될 수 있습니다. 언급했듯이, 축소된 레이아웃 모드에서는 토픽 목록에 표시되는 정보가 훨씬 적으며, 특히 https://meta.discourse.org/t/sams-simple-theme/23552와 같은 데스크톱 레이아웃과 비교하면 차이가 큽니다. 그래서 일부 사용자는 데스크톱 레이아웃을 명시적으로 강제하는 방식을 선호했으며, 이렇게 해도 가로 방향으로 올바르게 적응하여 넘치지 않도록 표시되었습니다.

2개의 좋아요

이렇게 하는 데에는 한계가 있었는데, 우리는 새로운 메서드들을 통해 이를 제거했습니다. 초기화 시점에 기능을 결정하는 것은 상당히 비유연하며, 무언가가 변경되면 전체 페이지를 다시 로드해야 합니다.

이것이 유용한 이유는 이제 기기들이 덜 예측 가능해졌기 때문입니다. 폰은 태블릿으로 접히거나 펼쳐질 수 있고, 노트북은 태블릿으로 전환될 수 있으며, 키보드와 마우스를 수많은 기기에 연결할 수 있습니다…

기존 방식에 익숙하다면 느낌이 다를 수 있지만, 초기화자에서 하던 작업은 여전히 가능할 뿐만 아니라 유연하게 변경되는 기능에 대응할 수 있습니다.

이제 가능합니다. 더 세밀한(granular) 방식으로, 전체를 교체하는 대신 동일한 템플릿 내에서 조건부적으로 콘텐츠를 표시/숨길 수 있습니다. 예를 들어, 이제 우리의 기능(capabilities) 서비스에 viewport 객체가 있습니다…

템플릿에서…

{{#if this.capabilities.viewport.lg}}
  대형 화면용 콘텐츠
{{/if}}

{{#if this.capabilities.viewport.sm}}
  매우 작은 화면용 콘텐츠 
{{/if}}

또는 JS에서…

get myContent() {
  if (this.capabilities.viewport.sm) {
    return "짧은 콘텐츠";
  } else {
    return "매우 매우 긴 콘텐츠"
  }
}

그리고 CSS에서는 같은 브레이크포인트와 정렬하여 다음과 같이 사용할 수 있습니다…

@use "lib/viewport";

.my-element {
  font-size: 1em;
  @include viewport.until(sm) {
     font-size: 2em;
  } 
}
8개의 좋아요

네, 이런 대체 기능들을 알고 있습니다.

다만, 이런 패턴들이 더 근본적으로 활용되기를 기대합니다.

예를 들어, 데스크톱에서 홈페이지가 카테고리(Categories)로 설정되어 있으면 주제 목록(Topic List)을 볼 수 있습니다.

주제 목록은 모바일에서도 표시되는 것이 타당할 텐데… 현재는 주제 목록 요소가 사라집니다.

이 때문에 모바일용 강제 홈페이지 TC(테마 컴포넌트)가 존재했던 것입니다 …

의도가 전달되고 있는지 모르겠습니다 …

4개의 좋아요

네, 이해가 갑니다. 그런 방식으로 서서히 지원 변경 사항을 적용할 것 같아요… 다만, 기존 방식에 기반해 많은 부분을 구축해 왔기 때문에, 커스터마이징을 즉시 깨뜨리지 않으면서 기존 방식을 지원해야 한다는 점이 까다롭긴 합니다.

5개의 좋아요

불행히도, 간소화된 모바일 레이아웃을 정말로 싫어하는 사용자들 때문에 이 주제를 좀 더 이어가야 할 것 같습니다. 특히 세로 방향으로 태블릿을 사용하는 사용자에게서 이런 경향이 두드러집니다.

그래서 정확히 무엇이 바뀌었는지 여전히 약간 혼란스럽습니다. 사이드바의 :desktop_computer: / :mobile_phone: 토글이 단순히 제거된 것인가요? 커스텀 스크립트나 다른 방법으로 동일한 JS 메서드를 여전히 호출할 수 있나요? 아니면 데스크톱 레이아웃 코드에 변경 사항이 생겨 더 이상 좁은 브라우저 폭에 반응적으로 적응하지 않게 된 건가요?

브라우저의 ‘데스크톱 사이트’ 토글(안드로이드 태블릿의 Chrome과 Firefox에서 테스트)은 Discourse 자체의 :desktop_computer: / :mobile_phone: 토글에 해당하던 구 레이아웃을 강제하는 것 같습니다. 여전히 반응적으로 적응하며 넘치지 않지만, 텍스트가 기억하는 것보다 훨씬 작아 보입니다.

특정 폭 브레이크포인트를 선택하는 방법, 예를 들어 @media screen and (max-width: 1000px) {… 등은 알고 있지만, CSS 오버라이드로 거기서 무언가를 할 수 있을지 확실하지 않습니다.

1개의 좋아요

동의합니다. 저는 원래부터 모바일 레이아웃을 별로 좋아하지 않았어요. 제 폰에서는 제약이 훨씬 심하게 느껴지고, 줌을 거의 반으로 줄이지 않는 한 모든 요소가 너무 크게 느껴지기 때문이에요. 저는 진짜로 더 이상 못 참을 때까지 여기서는 항상 데스크톱 레이아웃을 사용했어요.

하나의 레이아웃을 유지하면서 레이아웃 전환을 걱정하지 않아도 되는 단순함은 이해하지만, 가끔은 선택할 수 있는 옵션이 좋더라고요..

1개의 좋아요

아니요, 사이드바에서 단순히 제거된 것이 아닙니다. 토글 기능을 위한 기본 구조 자체를 제거했습니다.

3개의 좋아요

그렇다면 Force Mobile Homepagebroken 태그를 붙여야 한다는 뜻인가요?

1개의 좋아요

고장 난 것으로 표시했습니다.

이유는 다음과 같습니다:

2개의 좋아요

그렇다면, 일반 태블릿 세로 해상도에서 단순화된 모바일 레이아웃으로 되돌아가는 것을 막으려면 CSS에 @media screen and (max-width: 700px) { … 같은 것을 사용할 수 있을까요?

아니면, 사용자에게 추천할 수 있는 유일한 옵션은 모바일 브라우저의 “데스크톱 사이트” 토글인가요?

https://meta.discourse.org/my/preferences/interface 에서 글꼴 크기를 늘리는 것과 “데스크톱 요청”을 함께 사용하여 테스트해 볼 수 있을까요?

안녕하세요, 답변해 주셔서 감사합니다.
한 사용자는 브라우저에서 “데스크톱 사이트” 전환을 시도했지만, 아무런 차이가 없다고 보고했습니다. 제 태블릿에서는 전체 정보 데스크톱 레이아웃으로 변경되지만, "가장 크게"로 설정해도 글자가 거의 읽기 힘들 정도로 작습니다. 또한 사용자 설정에서 이를 적용하는 것은 같은 계정을 사용하는 PC 같은 다른 기기에서는 글자가 너무 커져서 이상적입니다.

2개의 좋아요

모든 기기에서 동일한 글꼴 크기를 사용할 필요는 없습니다.

1개의 좋아요

음, 왜 그 옵션이 없는지 모르겠네요.

아마 "정상"이 현재 기본값인 것 같습니다. 다른 옵션을 선택해 보셨나요?

2개의 좋아요

아, 음. :wink: 고마워, 좀 도움이 되긴 하네.

솔직히 예전 명시적 데스크톱 모드에서 세로 화면이 작았을 때 글꼴 크기 확대가 어떻게 작동했는지 기억이 안 나는데, 전체적으로 더 크게 보였던 것 같아. ‘최대’ 설정에 대해 CSS 오버라이드를 추가해야 할지도 모르겠어…

1개의 좋아요