문제 해결

• 목록
• 스크랩

증상

그누보드 관리자 페이지의 팝업레이어 관리에서 설정한 크기는 PC 기준입니다. 모바일 페이지를 별도로 사용하는 환경에서는 이 고정된 너비와 높이 값이 모바일 화면보다 클 경우 팝업이 화면을 벗어나거나 레이아웃이 깨지는 현상이 발생합니다.

원인

팝업 템플릿(mobile/newwin.inc.php)에 포함된 인라인 스타일(width, height)이 모바일 기기의 가변적인 화면 크기를 고려하지 않고 고정된 값을 출력하기 때문입니다.

해결 방법

팝업 템플릿에서 고정된 인라인 스타일을 제거하고, CSS를 통해 너비를 100%로 설정하여 반응형으로 대응합니다.

1. 모바일 팝업 템플릿 수정

mobile/newwin.inc.php 파일을 열어 팝업 컨텐츠를 감싸는 태그의 인라인 스타일을 삭제합니다.

<!-- 수정 전 -->
<div class="hd_pops_con" style="width:px;height:px">

<!-- 수정 후 -->
<div class="hd_pops_con">

2. 모바일 CSS 수정

css/mobile.css(테마 사용 시 /theme/테마명/css/mobile.css) 파일에 다음 스타일을 추가하거나 수정합니다.

.hd_pops {position:absolute;border:1px solid #e9e9e9;background:#fff;top:0px;left:0px}
.hd_pops_con {width:100%;min-height:200px}
.hd_pops_con img {width:100%}

확인 및 복구

확인 방법: 수정 후 모바일 기기 또는 브라우저 개발자 도구의 모바일 모드에서 팝업이 화면 너비에 맞춰 표시되는지 확인하십시오.

복구 방법: 수정 전 반드시 해당 파일을 백업하십시오. 문제가 발생하면 백업해둔 원본 파일을 덮어씌워 즉시 복구할 수 있습니다.

주의사항

• 테마를 사용하는 경우 수정 파일 경로가 /theme/테마명/css/mobile.css가 될 수 있으므로 반드시 확인하십시오.

함께 보면 좋은 글

• 그누보드 모바일 환경에서 특정 게시판 상단 및 하단 파일 출력 제외하기