티스토리 뷰

티스토리 반응형 스킨을 모바일로 보다 보면 모바일 화면이 답답하거나 더 많은 정보를 보기 위해서 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버전, 모바일버전이 제대로 구현되는지 확인해 보세요.


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


감사합니다. ^^

댓글
  • 비밀댓글입니다 2016.05.01 00:34
  • 토마토.. 할아버지 상중이라 바로 답변드리지 못했습니다.
    포스트 올리려고 준비해놓은게 있어서 바로 올려놓았어요.
    잘 안되시면 댓글남겨주세요.
    감사합니다.
    2016.05.02 23:58 신고
  • 지온
    안녕하세요

    PC화면에서 모바일 화면 보는 방법입니다

    모바일 화면을 PC화면에서 네이버 뉴스정보를 살짝살짝 틈내어 보기 좋습니다.
    마우스를 살짝 아이콘에 올려 놓으면 아이콘에 해당하는 모바일 웹페이지가
    나타나요!

    PC화면에서 몰래 보는 재미 솔솔 합니다! ㅋㅋ

    무료 입니다

    아이콘은 http://iconapp.co.kr/bbs_list.php?tb=board_iconapp 에 있습니다.
    2017.04.11 15:12
  • 코코넛냠냠 토마토님 글 참고해서 제가 조금 다르게 적용한 방법입니다.

    1) HTML 윗부분의 META 태그는 지우지 않고 그대로 둡니다. //
    <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">

    2) 스킨 css 파일에서 .area_foot으로 검색하면 딱 3줄이 나오는데 처음 두 줄만 수정합니다. height를 지우고 line-height 수치만 25랑 20으로 줄인 것입니다. //
    .area_foot{padding:15px 0 15px 0;font-size:12px;line-height:25px;text-align:center;background-color:#f0f0f0;color:#aaa}
    .area_foot{font-size:11px;line-height:20px;color:#999}

    3) <div id="dkFoot" role="contentinfo" class="area_foot"> 아래에 다음 태그를 넣어서 버튼을 추가합니다. //
    <button id="ButtonModeView" class="emph_t">PC버전보기</button>

    4) 추가한 버튼에 대한 스타일을 css의 적당한 위치에 예쁘게 붙여넣습니다. //
    .area_foot #ButtonModeView {
    padding: 4px 0 4px 0;
    border: 1px solid #a0a0a0;
    background-color: #d0d0d0;
    color: #707070;
    width: 100px;
    margin: 0 auto;
    display: none;
    margin-bottom: 7px;
    }

    5) </head> 직전에 아래의 스크립트 코드를 붙여넣습니다. //

    <script src="./images/jquery.cookie.js"></script>
    <script>
    if($.cookie("modeView") == "PC"){ // 모바일에서 PC화면으로 보기
    $('meta[name=viewport]').attr('content', 'width=1024, user-scalable=yes');
    }
    </script>

    6) </body> 직전에 아래의 스크립트 코드를 붙여넣습니다. //

    <script>
    $(function(){
    if(parseInt(screen.availWidth,10) > 820){ return; }
    if( $.cookie("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>

    7) 저장하고 잘 되는지 확인해 주세요. //
    2017.05.22 02:13 신고
댓글쓰기 폼
공지사항
Total
897,553
Today
38
Yesterday
337
링크
«   2021/01   »
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31            
글 보관함