반응형 스킨에 'PC화면 보기' 기능 추가하기
운영중이던 티스토리 실험실(http://tistory-lab.tistory.com) 블로그를 정리하기위해 본 블로그로 포스팅 이동합니다.
참고로 Material T에는 이미 적용되어있는 기능입니다.
-------------------------------------------
출처: http://nubiz.tistory.com/690 [Life is an egg.]
1. <head>영역에서 다음 구문을 찾습니다. (일치하지 않더라도 viewport가 들어있는 meta태그를 찾습니다.)
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
2. 찾은 코드를 삭제하고 아래 코드를 붙여넣습니다.
<script>
function getCookie(b){var d=document.cookie.split(";");for(var c=0;c<d.length;c++){if(d[c].indexOf("=")==-1){if(b==d[c]){return""}}else{var a=d[c].split("=");if(b==a[0].trim()){return unescape(a[1].trim())}}}}var desktopModeTF=getCookie("DesktopMode");var Scale=getCookie("DesktopModeScale");if(desktopModeTF=="true"){document.write('<meta name="viewport" content="width=1024, user-scalable=yes, initial-scale='+Scale+'">')}else{document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">')};
</script>
3. 아래는 PC버전 보기 버튼이 될 코드입니다. 버튼을 넣을 곳에 위치시켜주세요.
(이 블로그에는 페이지 제일 하단에 위치하고있습니다.)
<p onclick="desktopMode()">PC버전</p>
4. PC모드에서 다시 모바일로 돌아올때 사용 할 '원래대로' 버튼입니다. </body> 바로 위에 붙여넣습니다.
<script>if (desktopModeTF == "true") {document.write(
'<button onclick="undesktopMode()" style="width:100%;font-size: 3em;padding:2em;border: gray solid .3em;">원래대로</button>'
);}</script>
5. 아래 코드는 4.번 코드 바로 아래에 붙여넣어주세요.
<script>
function desktopMode() {
alert("페이지 하단의 원래대로 버튼을 누르면 원래대로 돌아옵니다.");
document.cookie="DesktopMode=true";
document.cookie="DesktopModeScale="+$('html').width()/1024;
window.scrollTo(0,0);
location.reload();
}
function undesktopMode() {
document.cookie="DesktopMode=false";
location.reload();
}
</script>
