PC버전에서도 모바일창 크기를 유지하도록 하고 싶습니다. - 커뮤니티

본문 바로가기
전체검색

커뮤니티

강좌 열람은 비회원도 볼 수 있게 모두 공개되어 있습니다.

PC버전에서도 모바일창 크기를 유지하도록 하고 싶습니다.

초보제작자 16-10-16 23:58

[sir질문게시판에서 해결이 되지 않아, 다시한번 부탁드리러 왔습니다.]

[사용중인 테마 = 커뮤니티 테마 / http://sir.kr/g5_theme/249?page=4]

 

==========

 

현재 작업중인 사이트가 PC,모바일 따로이긴한데, PC기능을 닫아버리고

모바일웹으로만 동작하도록 해놓았습니다.

 

그래서, PC에서도 접속하면 모바일화면으로 보여지는데,

양쪽으로 화면을 꽉 채우다 보니까, 게시판들도 다 틀어지고 보기도 좀 불편하더라구요.

 

http://sir.kr/qa/136034

[▲ fm25님이 답변해주신, 관련질문글]

 

검색을 통해서 위의 글을 참고하여, 민트테마를 다운받고, 살펴보았는데

어떤부분이 PC에서의 화면을 모바일처럼 고정시켜주는 기능인지를 모르겠네요...

 

참고로, 해당 질문자분께서는 head.sub 부분을 건드리셨다는데

그쪽도 많이 살펴보았지만, 감을 잡지 못했습니다..

 

[code]

/* 중간 레이아웃 */
#wrapper {background:#eee;width:100%;}
#wrapper:after {display:block;visibility:hidden;clear:both;content:""}
#container {position:relative;max-width:800px;margin:0px auto;z-index:1;padding:20px}
#container:after {display:block;visibility:hidden;clear:both;content:""}
#container_title {margin:0 0px 10px;font-size:1.2em;font-weight:bold;text-align:center;border-bottom:2px solid #ddd;padding-bottom:20px;}

[/code] 

[▲ 민트테마 / mobile.css / 86번줄-92번줄]

 

 
[code]
/* 중간 레이아웃 */
#wrapper {z-index:5;margin:0 auto;width:970px;border-right:1px solid #dde4e9;border-left:1px solid #dde4e9;zoom:1}
#wrapper:after {display:block;visibility:hidden;clear:both;content:""}
#aside {float:right;margin:0 0 0 -1px;width:210px;border-left:1px solid #dde4e9;background:#fff}
#container {z-index:4;position:relative;float:left;padding:15px 16px 15px 15px;width:728px;min-height:500px;height:auto !important;height:500px;border-right:1px solid #dde4e9;background:#fff;font-size:1em;zoom:1}
#container:after {display:block;visibility:hidden;clear:both;content:""}
#container_title {margin-bottom:20px;font-size:1.2em;font-weight:bold}
[/code]

[▲ 민트테마 / default.css / 83번줄-91번줄]

 

위의 코드표에서 mobile.css의 3번째줄에 있는 container부분 'max-width:800px'

또는 default.css의 5번째줄에 있는 container부분 'max-width:728px' 

 

제 미천한 실력에서는 해당부분이 짐작되어져 제가 작업중인 모바일사이트의

mobile.css에 container부분을 800px로 수정해보았는데, 말그대로 중간 레이아웃만 줄었습니다.

이런식으로 상단, 하단 전부 각각 해당값을 입력하여 줄여줘야 하는건가요?

 

민트테마의 경우 800px 또는 728px로 폴더 전체를 검색해봐도 설정된값이 저것 말고는 검색되지 않는데,

반응형이라 그런건지, 아니면 해당코드가 아닌 다른값에서 조정을 해야하는데 제가 잘못짚은건지 모르겠네요.

 

최대한 상황과 제가 해본 방법을 적는다는게 적다보니까 너무 많이 적은 것 같습니다.

작은별님께 귀찮음을 드리는것같아 죄송하지만, 해결해보고자 이렇게 부탁드리러 왔습니다.

댓글목록 +2

댓글목록

profile_image

관리자님의 댓글

관리자 작성일

이건 너무 포괄적인 내용입니다.
사이즈 적용이 안 되는 곳은 직접 일일이 찾아서 수치를 조정하셔야 할 것 같습니다.
중간 부분만 줄어들었다면 상 하단도 찾아서 넣어줘야겠죠.
head, tail 파일과 css 파일 비교해서 체크하면 css 파일에서 어느 부분인지 위치는 다 나옵니다.
값이야 여백 부분도 있기 때문에 800과 다르게 있을 수도 있고 없을 수도 있습니다.
없는 부분은 넣어주면 됩니다. 가로 100%인 경우 고정 값이 없는 경우도 많습니다.
크롬 개발자 모드를 활용하는 것도 있고 이런 건 반복적으로 여러 번 직접 찾아보면서 해봐야 합니다.

profile_image

초보제작자님의 댓글의 댓글

초보제작자 작성일

아하.. 역시 하나하나 찾아서 따로따로 적용을 해주어야 하는거군요..
답변 감사합니다 ^^

로그인 후 댓글 작성 가능합니다.

로그인

로그인 후 글 작성 가능합니다.
그누스킨닷컴

그누스터디는 그누보드, 영카트를 이용하시는 초보 사용자를 위한 정보를 공유합니다.

E-MAIL : gnustudy@naver.com / 카카오톡 : gnustudy / 텔레그램 : gnustudy
제작 문의를 제외한 일반 문의는 QA 게시판을 이용해주세요.

Copyright gnustudy.com All rights reserved.