웹 제작 초보입니다. 반응협 웹좀 도와주세요 ㅠ
본문
안녕하세요 초보 웹 디자이너입니다
지금 반응형 웹을 제작중인데요
미디어쿼리를 이용하고 있습니다.
@media all and (min-width: 200px) and (max-width:899px)
@media all and (min-width:900px) and (max-width:1244px)
@media all and (min-width:1245px)
으로
모바일, 태블릿(노트북), pc로 나눠서 표현하려는데요
트로이 다음을 이용해서 확인해보니 모바일 태블릿 모두 정상 작동 해서 문제없다고 생각했는데
실제로 기기를 통해 확인해보니 모바일 페이지가 계속 태블릿 페이지로 나옵니다.
현재 게시판 추출때문에 그누보드 판에다가 메인 페이지 얹혀둔 상태구요
config.php 파일에서 그누보드 자체 모바일 출력 부분은 false로 바꿔둔 상태입니다.
고수분들의 많은 조언 부탁드립니다.
답변 1
반응형 웹에 대한 이해가 부족하시면, 부트스트랩이나 파운데이션 같은 라이브러리들을 먼저 공부하시는 게 좋습니다.
미디어쿼리를 이용한 뷰포트에 따른 분기도 저런 라이브러리 템플릿들엔 이미 구성되어 있습니다. 올리신 미디어쿼리는 분기점도 적정치 않고, 기준을 어떤것으로 잡으셨는지도 불명확합니다.
가령, 최근에 제작되는 대부분의 반응형 웹페이지는 모바일퍼스트 입니다. 즉 모바일에서 보이는 디자인을 먼저 작성하고 그 이외의 부분을 미디어쿼리를 이용하여 분기점을 나눠 오버라이드 하는 형식이죠.
부트스트랩의 경우는 기본 그리드 시스템이 아래와 같은 분기점을 이용합니다.
매우 작은 기기 < 768px
작은 기기 태블릿 >= 768px
중간 기기 데스크탑 >= 992px
큰 기기 데스크탑 >= 1200px
큰 기기 데스크탑을 와이드형 모니터로 간주하는 경우를 제외하곤 위의 그리드시스템이 딱히 문제될게 없지요.
빠른 답변 감사합니다. 적어주신 해상도 유용하게 잘쓰겠습니다.
답변해주신 대로 분기점을 재조정해서 확인해보니 데스크탑환경 트로이 다음에서도 역시나 잘 작동이 되지만, 모바일 기기로 들어오면 역시나 해상도를 못잡고 태블릿 버젼으로 뜹니다.
모바일 기기를 인식하지 못하는 것 같은데 이것에 대한 근본적인 해결점이 있을까요?
일단 그누보드를 반응형으로 만드실때 유의할점들이 있습니다.
기본적으로 pc로 접속할때와 실제 모바일기기에서 접속할때를 그누보드는 is_mobile() 함수를 이용해 파악한 후 각각 다른 페이지를 불러옵니다. config.php 파일의 사용기기 설정 부분을 살펴보시면 이 상수를 설정하는 부분이 있습니다. pc나 mobile 중에 하나를 선택하셔야 두 기기간의 웹페이지가 같아 보입니다.
즉, 분기부분을 끄는 설정이 먼저 필요하단 이야기입니다. 위의 선택값을 기준으로 모바일페이지 혹은 PC 페이지를 수정하시면 됩니다.
