[ javascript ] 반응형 웹에서 PC 버전보기 구현

<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");
	var defWidth = 1170;
	if (desktopModeTF == "true") {
		document
				.write('<meta name="viewport" content="width='+defWidth+', user-scalable=yes, initial-scale='+Scale+'">');
	} else {
		document
				.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">');
	}
	function desktopMode() {
		if(getCookie("DesktopMode") == "true"){
			setModeCookie(false);
		}else{
			alert("다시한번 클릭하시면 원래대로 돌아옵니다.");
			setModeCookie(true);
			window.scrollTo(0, 0);
		}
		location.reload();

	}
	function setModeCookie(switchOn){
		var now = new Date();
		var time = now.getTime();
		time += 3600 * 1000;
		now.setTime(time);
		document.cookie ='DesktopMode='+switchOn +'; expires=' + now.toUTCString() ;
		if(switchOn){
			document.cookie = "DesktopModeScale=" + $('html').width() / defWidth +'; expires=' + now.toUTCString() ;;
		}
	}
</script>

 

를

 

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">

 

과같은 viewport 를 작성한 메타태그를 지우고 대체한다.

 

그후에

<button onclick="desktopMode()">pc <-> 모바일 전환 </button>

 

를 구현하여 사용하면된다.