티스토리 반응형 스킨에 PC버전 보기, 모바일버전 보기 버튼 만들기

티스토리 반응형 스킨을 모바일로 보다 보면 모바일 화면이 답답하거나 더 많은 정보를 보기 위해서 PC화면으로 보는 것과 똑같이 보고 싶을때가 있습니다.

아래 스크린샷을 보시면 왼쪽이 모바일 버전, 오른쪽이 PC 버전입니다.

오늘은 이렇게 반응형 웹인 티스토리 반응형 스킨에 PC버전 보기와 모바일 버전 보기를 만들어 보도록 합시다.

모바일 버전과 PC 데스크탑 버전이 다른 페이지라면 링크만 걸면 되지만,

반응형 웹일경우에는 PC데스크탑 버전이나 모바일버전이나 동일한 URL이며, 해상도에 따라 모바일 화면과 데스크탑 화면이 다르게 보여집니다.

따라서 단순히 링크만 걸어서는 모바일버전/PC버전 보기를 구현할 수 없습니다.

위 설명을 들어서는 어려운 말처럼 들릴지 모르지만 코드가 이해되지 않아도 아래 순서대로 따라하시기만 하면 됩니다.

우선 PC버전, 모바일버전 버튼을 만들어야 하는데요. 원하는 위치에 넣으시면 되며, 제가 사용하는 티스토리 반응형 스킨 #1을 예를 들어서 만들어 보도록 하겠습니다.

1. [관리]->[꾸미기]->[HTML/CSS 편집] 에서 HTML탭에서 위 스크린샷처럼 Footer(하단)에 넣으려면 <div id="dkFoot" role="contentinfo" class="area_foot"> 을 찾아서 아래처럼 그 아래에 2번째라인을 추가하세요.

		<div id="dkFoot" role="contentinfo" class="area_foot">
			<div id="ButtonModeView" class="emph_t" style="padding:4px 0 2px 0; border:1px solid #a0a0a0; background-color:#d0d0d0; color:#707070; width:100px; margin:0 auto; display:none; margin-bottom:7px">PC버전보기</div>
			Blog is powered by
			<em class="emph_t">Tistory</em> / Designed by
			<em class="emph_t">Tistory</em><br/>
		  Customized by <em class="emph_t">Sometimes-n</em>
		</div>

CSS 수정도 해야 하는데, 아래 포스트를 참고해 주세요

2016/05/02 - [IT/블로그,티스토리] - 티스토리 반응형 웹스킨 #1 하단 copyright 수정

위 예시와 다른 버튼으로 추가하시려면 PC버전보기 버튼 태그에 id="ButtonModeView" 와 style="display:none" 만 추가하시면 됩니다.

2. 아래 파일을 다운로드 받아서 [관리]->[꾸미기]->[HTML/CSS 편집] -> [파일업로드]탭에서 업로드하세요.

jquery.cookie.js

3. HTML 탭에서 <meta name="viewport" 으로 시작하는 태그를 >까지 삭제해주세요.

   (예시 : 티스토리 반응형 스킨 #1 라면 아래 태그를 모두 삭제해주세요.)

<meta name="viewport" content="user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,width=device-width,target-densitydpi=medium-dpi">

4. HTML 탭에서 </head> 태그 바로 앞에 아래 코드를 삽입하세요.

<script type="text/javascript" src="./images/jquery.cookie.js"></script>
<script type="text/javascript">
var screenWidth = parseInt(screen.availWidth,10);
var modeView = "Mobile";
if( screenWidth < 850 ){
  if($.cookie("modeView")){
    modeView = $.cookie("modeView");
  }
  if( modeView == "PC" ){
    document.write('<meta name="viewport" content="width=1024, user-scalable=yes">');
  }else{
    document.write('<meta name="viewport" content="user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,width=device-width,target-densitydpi=medium-dpi">');
  }
}
$(function(){
  if( screenWidth < 850 ){
    if( modeView == "PC" ){
      $("#ButtonModeView").css("display", "block").text("모바일버전").bind("click", function(){
        $.cookie( "modeView", "Mobile" );
        top.location.replace(document.location.href.replace(/#.*$/g, ""));
      });
    }else{
      $("#ButtonModeView").css("display", "block").text("PC버전").bind("click", function(){
        $.cookie( "modeView", "PC" );
        top.location.replace(document.location.href.replace(/#.*$/g, ""));
      });;
    }
  }
});
</script>

끝입니다. 정말 간단하고 쉽죠? ^^

위 스크립트는 제 스킨에 맞게 설정해놓은것이니까 아래 코드의 주석을 보시고 본인에게 맞게 수정해서 사용하세요.

<script type="text/javascript" src="./images/jquery.cookie.js"></script>
<script type="text/javascript">
var screenWidth = parseInt(screen.availWidth,10);
var modeView = "Mobile";
if( screenWidth < 850 ){ // 본인 반응형 스킨의 폭으로 수정하세요. 820픽셀보다 화면이 작아지면 모바일보기로 전환된다면 820으로 수정하면 됩니다.
  if($.cookie("modeView")){
    modeView = $.cookie("modeView");
  }
  if( modeView == "PC" ){
    document.write('<meta name="viewport" content="width=1024, user-scalable=yes">');
    // PC버전으로 보고 싶은 가로폭을 지정해주세요. 1280으로 보고 싶으시면 1280으로 수정하시면 됩니다.
  }else{
    document.write('<meta name="viewport" content="user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,width=device-width,target-densitydpi=medium-dpi">');
  }
}
$(function(){
  if( screenWidth < 850 ){  // 본인 반응형 스킨의 폭으로 수정하세요. 820픽셀보다 화면이 작아지면 모바일보기로 전환된다면 820으로 수정하면 됩니다.
    if( modeView == "PC" ){
      $("#ButtonModeView").css("display", "block").text("모바일버전").bind("click", function(){
        $.cookie( "modeView", "Mobile" );
        top.location.replace(document.location.href.replace(/#.*$/g, ""));
      });
    }else{
      $("#ButtonModeView").css("display", "block").text("PC버전").bind("click", function(){
        $.cookie( "modeView", "PC" );
        top.location.replace(document.location.href.replace(/#.*$/g, ""));
      });;
    }
  }
});
</script>

바탕화면 해상도에 따라 버튼이 활성화되므로 PC에서 브라우져를 크기를 줄여도 PC버전보기 버튼이 활성화 되지 않습니다.

따라서 본인 스마트폰으로 블로그를 보시고 PC버전 보기 버튼이 활성화 되는지, 버튼을 클릭했을때 PC버전, 모바일버전이 제대로 구현되는지 확인해 보세요.

혹시라도 안되시거나 궁금하신 사항이 있으시면 댓글 남겨주시면 정성을 다해 답변 달아 드리겠습니다.

감사합니다. ^^