호라이즌(Horizon)의 헤더는 모바일과 데스크톱 모두에서 대부분의 시간 동안 매우 잘 작동합니다:
하지만 저는 비정상적인 화면 비율을 가진 폴더블 폰을 사용하는데, 불행히도 검색창과 아바타가 사라지고 모든 것이 약간 어긋납니다:
이것은 640~767px 폭에서 발생하는 것 같은데, 안타깝게도 제 폴더블 폰이 정확히 그 범위에 해당합니다!
저도 이 문제를 재현할 수 있습니다. 문제는 접이식 스마트폰/소형 태블릿 뷰포트 크기 @media (min-width 640px) (max-width: 767px)에서 헤더 안의 contents 클래스가 grid로 표시되는 것 같습니다:
해당 너비 범위에서 properties를 contents로 변경하면 패치할 수 있습니다:
@media (min-width: 640px) and (max-width: 767.98px) {
.d-header>.wrap .contents {
display: contents!important;
}
}
하지만 저는 그 설정이 오히려 더 나쁘게 만든다고 느낍니다!! 해당 설정을 꺼두면, 모바일 기기로 지정되지 않는 한 767px 이하의 모든 크기에서 헤더가 깨져 보입니다.
하지만 적어도 접이식 스마트폰에서는 문제가 없습니다. 다만 화면이 작아질 때 데스크톱 브라우저에서는 여전히 문제가 있네요.
이 설정은 이제 사라진 것 같아서 더 이상 우회 방법이 없습니다.
Horizon에서는 여전히 문제가 남아 있습니다.
지금 데스크톱 시뮬레이션을 통해 재현해 보고 있는데(폴더블 폰이 없어서), 특별히 이상한 점을 발견하지 못하겠습니다. 이 문제를 진단하는 데 도움을 주실 수 있나요?
아, 재현 관련해서 그렇게 할 수 있다는 걸 깜빡했네요! 아니, 저한테는 메타에서 호라이즌으로도 재현이 안 돼요.
아마 제 사이트 쪽에 문제가 있는 것 같네요. 제 쪽에서 문제를 조사해 보고 결과를 알려드릴게요. 확인해 주셔서 감사합니다!!!
와, 문제를 찾는 게 놀라울 정도로 쉬웠네요.
이 테마 구성요소는 Horizon과 호환되지 않아요:
그리고 TC를 정말 좋아해요!! 모바일에서 메뉴가 오른쪽으로 넘어가는 걸 참을 수가 없거든요. 이런 사소한 것들이 우리를 미치게 만들죠 (물론 우리 중 일부는요), 그렇죠? 아마도 저는 왼손잡이여서 거기가 더 편한 걸지도 몰라요.
네, 알겠습니다.
원본 Horizon Theme 주제에서 이렇게 말씀드린 바 있습니다:
저도 그 컴포넌트를 사용 중입니다. 사이드바 아이콘에 대해서는 같은 생각을 가지고 있지만, 호라이즌은 좋아하지도 않고 사용하지는 않아요. 해당 컴포넌트에 대한 작업을 해본 적이 있어서, 내던에게 수정 방법을 찾아보겠습니다.
네이선, 안녕하세요! 여기서 수정 사항을 찾았어요:
릴리, 진짜 최고야! 접이식 폰으로 왼쪽은 햄버거, 오른쪽은 호라이즌을 동시에 즐기고 있어.
정말 대단해!!!