질문/조언팁/리소스 공유

반응형 레이아웃을 사용할때 상당수의 홈페이지들이 다음과 같이 반응합니다. 

  • 데스크탑 접속자 => 데스크탑 화면 보여줌
  • 모바일 접속자(세로) => 모바일 화면 보여줌
  • 모바일 접속자(가로) => 모바일 화면 보여줌 (혹은 사이트에 따라 데스크탑 화면 보여줌)

접속자에게는 선택권이 없고 웹서버에서 주는대로 보는 수밖에는 없습니다. 

 

그런데, 모바일 접속자 중에도 데스크탑 화면을 보고 싶은 경우가 있습니다. 왜냐면 데스크탑에 있는 항목 100%가 모바일에 보이는 것이 아니고 일부 메뉴나 선택이 안보이는 경우가 있습니다. 웹페이지 만들다보면 사용빈도가 떨어지는 것은 모바일에서 안보이도록 하는 것이 더 유리한 경우도 있고... 구현이 어려운 경우도 있어 빼버리기도 하고... 어떤 사람은 뭐, "난 시력 3.0이다. 데스크탑 화면도 잘보여~" 하는 사람도 있을수 있겠지요.

 

그래서 다음과 같이 하는 것이 바람직하죠.

  • 데스크탑 접속자 => 데스크탑 화면 보여줌
  • 모바일 접속자 => 모바일 화면 원하는 사람(또는 선택 안한 사람) => 모바일 화면 보여줌
  • 모바일 접속자 => 데스크탑 화면 원하는 사람 => 데스크탑 화면 보여줌

라이믹스에서 이렇게 하는 것이 힘들면 뭐라 안하겠는데, 사실 아주 간단합니다. 묻지마식으로 다음과 같이 하면 됩니다.

  • 관리자 페이지 -> 시스템 설정 -> 고급설정 -> 모바일 viewport 설정 -> (입력창 내용을 모두 삭제) -> 저장
  • 사용중인 layout 소스 -> layout.html 편집 -> 최 상단에 다음 문구 추가 (기존 viewport 메타태그가 있으면 삭제)
{@ $_is_mobile = Mobile::isMobileCheckByAgent()}
<[email protected]($_is_mobile)-->
{Context::addHtmlHeader('<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">')}
<[email protected]>

 

참고로, 혹시 모르시는 분은 없겠지만, 사용자가 스마트폰에서 데스크탑 화면 요청하는 방법은, 사파리의 경우, 상단 어드레스바 좌측의 aA 글자를 누르면 데스크탑 화면 요청 버튼이 있고, 크롬의 경우, 우측 하단 "..."을 누르면 거기에 데스크탑 모바일 화면 요청 버튼이 있습니다.