안녕하세요,
제 웹사이트가 태블릿에서 반응형으로 표시되지 않는 것을 발견했습니다. 하지만 안전 모드에서 플러그인을 비활성화하면 반응형으로 정상 작동합니다. 제 웹사이트에는 공식 플러그인만 설치되어 있습니다.
제 웹사이트에 설치된 플러그인은 다음과 같습니다:
이 문제는 메타(meta)에서는 보이지 않습니다. 메타가 discourse-adplugin을 사용하지 않기 때문이라고 생각합니다.
태블릿에서 확인되는 웹사이트 화면:
애드블로커를 비활성화하거나 시크릿 모드를 사용해 보시겠어요? 효과가 있는지 확인해 보세요.
시크릿 모드에서도 동일한 문제가 발생합니다.
새로운 사이드바와 관련이 있는 것 같습니다. 햄버거 메뉴를 사용해 사이드바를 숨기면 사이트가 반응형으로 작동하고 화면에 완벽하게 정렬되거든요.
1개의 좋아요
태블릿이 없어서 직접 테스트를 해볼 수는 없지만, enable experimental sidebar hamburger와 enable sidebar 관리자 설정을 비활성화해 보시고, 단기적으로 도움이 되는지 확인해 주실 수 있을까요?
1개의 좋아요
네, 사이드바 설정 두 가지를 비활성화하면 사이트가 다시 반응형으로 동작하고 화면에 맞게 정렬됩니다. 문제는 사이드바와 관련이 있습니다.
안녕하세요,
해당 사이트에서 재현할 수 있습니다. 상단 광고가 고정 폭으로 설정되어 있기 때문이라고 생각됩니다. 반응형 광고 유형을 선택할 수 있는지, 아니면 CSS로 폭을 설정할 수 있는지 확실하지 않습니다. 
아마도 Discourse 광고가 사이드바와 더 잘 작동하려면 몇 가지 업데이트가 필요할 수도 있고, 혹시 광고에 대한 수정 사항이 있으신가요?
1개의 좋아요
2개의 좋아요
새로운 또는 기존 테마 컴포넌트에 이 코드를 추가하여 어떻게 작동하는지 확인해 볼 수 있을까요?
Desktop / CSS
@media screen and (max-width: 1000px) {
.google-adsense .google-adsense-content {
width: 100% !important;
}
}
2개의 좋아요
CSS를 추가했습니다. 이제 메인 사이트에서는 문제가 없지만, 모든 페이지에서 문제가 발생합니다.
광고에 대한 수정은 전혀 하지 않았습니다. 광고 목록 위에 고정 크기의 AdSense 플러그인 광고를 사용하고 있습니다.
1개의 좋아요
설정을 변경했습니다. 한 번 더 시도해 주시겠어요??
아, 그렇군요. 문제는 고정 폭 광고에 있는 것 같습니다. 예를 들어 사이드바가 접힌 상태로 사이트를 열었다가 사이드바를 다시 열면, 전체 크기의 광고까지 오른쪽으로 당겨지고, 페이지를 새로고침해야만 광고 폭이 제대로 업데이트됩니다.
아쉽게도 지금 제 테스트 사이트에서 바로 확인해 볼 수는 없습니다.
하지만 이런 방식이 다른 광고에도 적용될 수 있을 것 같습니다. 이전 코드를 아래처럼 수정해 보실 수 있을까요?
@media screen and (max-width: 1110px) {
.google-adsense .google-adsense-content {
width: 100% !important;
.adsbygoogle {
width: 100% !important;
> div {
width: 100% !important;
}
}
}
}
1개의 좋아요
이전 CSS를 새로운 것으로 교체했습니다. 하지만 메인 사이트에서는 문제가 없는데, 모든 페이지에서 여전히 동일한 문제가 발생하고 있습니다. 캐시도 삭제해 봤지만 결과는 같습니다.
1개의 좋아요
죄송합니다. 지금은 이게 제가 드릴 수 있는 최고의 팁입니다. 하지만 적어도 광고가 이 문제를 일으킨다는 것은 이제 알 수 있게 되었습니다. 미래의 수정 사항과 충돌하지 않도록 확실하게 하려면 해당 코드를 제거할 수 있다고 생각합니다. 
1개의 좋아요
도와주셔서 감사합니다. 누군가 이 문제를 빨리 해결해 주길 바랍니다.
1개의 좋아요
안녕하세요, 네, 재현해 볼 수 있습니다. 토픽 페이지에서 사이드바가 열린 상태에서 790px 미만일 때 하단의 .loading-container의 max-width가 이 문제를 일으키는 것 같습니다.
.has-sidebar-page가 사용 가능한 경우, 이 계산에 --d-sidebar-width를 추가하는 것이 좋을 것 같습니다.
하지만 저는 모바일 뷰에서 해당 화면 크기에 대해 더 나은 경험을 할 수 있을 거라고 생각합니다.
요약하면:
최신 페이지에서는 상단 광고의 고정된 폭이 이 문제를 일으키며, 위에서 언급한 토픽 페이지에서도 마찬가지입니다.
이 빠른 수정이 당신에게도 작동할 것입니다.
Desktop / CSS
.google-adsense .google-adsense-content {
max-width: 100%;
.adsbygoogle {
max-width: 100%;
> div {
max-width: 100%;
}
}
}
@media all and (max-width: 790px) {
body.has-sidebar-page {
.topic-area > .loading-container {
max-width: calc(100vw - var(--d-sidebar-width) - 32px);
}
}
}
2개의 좋아요
Don 씨, 감사합니다. 이제 사이트가 반응형으로 작동하며 제 태블릿에서 예상대로 잘 동작합니다. Discourse 스태프가 메타 사이트에서도 이 버그를 수정해 주기를 바랍니다.
1개의 좋아요