반응형 티스토리 스킨, 진정한 pc버전(데스크톱모드)보기 버튼 만들기
반응형 스킨을 사용하면서 새로 쓰는 글들은 반응형에 맞춰서 작성을하지만,
항상 기존에 작성했던 글들이 문제가 됩니다.
본문에 사진3장연속보기나 표를삽입한경우, 티스토리 에디터가 가로크기를 픽셀단위로 지정하기 때문에 축소가 불가능한 반응형스킨에서는 내용이 잘려보이게됩니다.
티스토리의 모바일 스킨에는 PC버전 보기 버튼이 있어서 해결가능하지만, 반응형스킨에는 그런것이 없었습니다.
그동안 2가지정도의 해결방안을 찾아보았는데요,
첫번째가 컨텐츠영역의 가로크기를 충분히 늘리고 스크롤할수 있게 하는것이었습니다.
[iTIPs/Web] - 반응형 스킨 데스크톱 보기 대신할 가로 넓게보기
이방법도 좋긴한데, 화면 요소가 약간 깨지는 등 뭔가 엉성한면이 없지않아 있습니다.
또하나 깔끔한 해결법으로서 문제가되는 표만 스크롤가능하게 하는 방법이 있었습니다.
[iTIPs/Web] - 티스토리 반응형 스킨에서 표 잘림 문제 해결하기
그러나 이 방법은 컨텐츠를 작성자가 원하는 레이아웃대로 표시해줄 수 없다는 문제가 있습니다.
그래서 완전한 데스크톱모드로 보기 버튼을 만들 수 없을까 하다가 드디어 방법을 찾았습니다.
이 방법은 거의 모든 반응형 스킨에 사용 가능합니다.
(마크쿼리님의 반응형스킨 시리즈, readiz님의 Fastboot, 기타 모바일화면이 존재하는 반응형스킨들..)
티스토리가 아니더라도 viewport meta 태그를 사용한 페이지에서 모두 사용가능합니다.
반응형 스킨에 PC버전(데스크톱모드)으로 보기 버튼 만들기
1. <head>영역에서 다음 구문을 찾습니다. (일치하지 않더라도 viewport가 들어있는 meta태그를 찾습니다.)
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
2. 찾은 코드를 삭제하고 아래 코드를 붙여넣습니다.
<script>
function getCookie(name) {
var cookies = document.cookie.split(";");
for(var i=0; i<cookies.length; i++) {
if(cookies[i].indexOf("=") == -1) {
if(name == cookies[i])
return "";
}
else {
var crumb = cookies[i].split("=");
if(name == crumb[0].trim())
return unescape(crumb[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>
미리보기
원리
바로 이전 글과 같은 원리입니다.
[iTIPs/Web] - 반응형스킨 - 모바일 스킨 사용하지 않기
반응형 스킨이라면 거의 모두 포함하고있는 viewport 메타태그 속성을 변경하는 것입니다.
버튼을 누르면 쿠키를 저장하고 페이지를 새로고치게됩니다.(쿠키 아이디어 제공해주신 Readiz님 감사합니다.)
그러면 쿠키값에 따라 모바일화면의 viewport 메타태그가 실행되기도하고, 데스크탑화면으로 실행되기도 하는 것입니다.
호환성
모바일기기에서만 작동합니다.
대부분의 안드로이드 브라우저에서 정상작동합니다.
일부 웹뷰형식의 브라우저에서 지원이 안됩니다.
아이폰 사파리에서 작동확인했습니다.
윈도우폰은 확인못했습니다. 윈도우폰 이용자 계시면 댓글남겨주세요~
커스텀
본문에서 파란색 표시된 곳을 수정하시면 됩니다.
1. 축소비율 변경.
코드에서 1024라는 숫자를 자신이 원하는 가로해상도로 바꾸시면됩니다.
예) 더 넓은 화면을 원하시면 1440 등..
2. 팝업창 안내문구
5번 항목에서
alert("페이지 하단의 원래대로 버튼을 누르면 원래대로 돌아옵니다.");
이 줄을 지우거나 수정하시면 됩니다.
3. PC버전 버튼
이부분은 태그에 onclick="desktopMode()" 만 포함되면 어떤식으로든 수정할 수 있습니다.
<div>로 바꾸셔도 상관없고 <button>으로 바꾸셔도 됩니다.
4.원래대로 버튼 수정
<script>if (desktopModeTF == "true") {document.write(
'<button onclick="undesktopMode()" style="width:100%;font-size: 3em;padding:2em;border: gray solid .3em;">원래대로</button>'
);}</script>
에서 역시 onclick="undesktopMode()"만 유지하시면 어떻게든 바꾸셔도 됩니다.
