모바일에서 main-outlet 래퍼의 자동 여백(auto margin)은 여기에서 초기화되어 있습니다:
이로 인해 테마에 -d-max-width가 선언되면 레이아웃이 왼쪽으로 정렬됩니다. 더 좁은 화면의 기기에서는 보이지 않지만, 태블릿의 가로 모드에서는 문제가 발생합니다. 예를 들어 Air 테마에서 확인할 수 있습니다:
해당 선언이 추가된 이유는
때문인 것으로 보입니다.
현재 토픽 목록에서는 일반적으로 문제가 보이지 않습니다. 따라서 해당 선언을 제거할 수 있을까요? 아니면 특정 사례가 있다면, 브레이크포인트에 할당하는 것이 더 나을 것입니다.
이 규칙을 제거해도 될 것 같습니다. 일부 테마(특히 커스텀 테마)에서 모바일에서 큰 여백이 생길 수 있지만, 대부분의 테마는 문제없을 것입니다.
다만, 태블릿에서 모바일 뷰를 보고 계신다는 점에 유의하세요. iPad의 경우 더 이상 기본값이 모바일 뷰가 아니며, 데스크톱 뷰가 기본으로 설정되어 있어 모바일 스타일시트가 로드되지 않습니다. 이 태블릿이 Android인가요?
네, 그건 안드로이드 태블릿이에요.
태블릿에서 가로 모드로 브라우저를 사용할 때, 모바일 사용자 에이전트를 기본값으로 설정하는 것은 잘못된 선택이라고 말하고 싶다 (솔직히 세로 모드에서도 마찬가지다). 이것이 Chrome인지 다른 브라우저인지는 확실하지 않다. Chrome은 일부 경우 데스크톱 모드를 기본값으로 설정한다: Chrome enables desktop mode by default on premium tablets | Blog | Chrome for Developers
아이패드와 안드로이드 태블릿에서 이 문제를 재현할 수 있습니다. 다만 화면 비율 때문에 안드로이드에서 더 심합니다:
모바일 설정에서 제가 좋아하는 점 중 하나는 사이드바 메뉴가 페이지에 임베드되는 것이 아니라 오버레이로 슬라이드 인한다는 것입니다. 제 생각에 모바일 기기에서 더 "네이티브"처럼 느껴집니다.
브레이크포인트 선언을 추가하는 것은 어떨까요?
@include breakpoint(mobile-extra-large) {
#main-outlet-wrapper {
margin-left: unset;
margin-right: unset;
}
}
이렇게 하면 좁은 모바일 기기에서는 잠재적인 여백이 제거되고, 더 넓은 기기에서는 래퍼가 중앙 정렬됩니다.
breakpoint(mobile-extra-large) 옵션은 나에게도 합리적으로 보입니다. @awesomerobot의 생각도 궁금합니다.
매우 커스텀한 테마 몇 가지를 직접 테스트해 봤는데, 더 이상 이 기능이 필요하지 않은 것 같습니다… 이 기능이 추가된 지 몇 달 후, 래퍼가 width: 100%;와 함께 그리드로 설정되었기 때문에 이론상으로는 원래 문제가 아예 발생하지 않아야 합니다.
여기서 제거합니다.
조사해 주셔서 감사합니다!