그곰의 생활

모바일 웹에서 화면이 세로모드, 가로모드일 때 각각 다른화면 출력 본문

Client-side/SCRIPT

모바일 웹에서 화면이 세로모드, 가로모드일 때 각각 다른화면 출력

그곰 2012. 3. 12. 14:16

아래 스크립트를 이용하여 html 태그를 구성한다.


<html>
<head>
  <title>모바일 세로모드, 가로모드 화면 테스트</title>
</head>
<body onorientationchange="orient();">
<script type="text/javascript">
//<![CDATA[
	window.onload = orient;
	function orient(){
		switch(window.orientation){
			case 0 :
				document.getElementById("orient_portrait").style.display="block";
				document.getElementById("orient_landscape").style.display="none";
				break;
			case -90 :
				document.getElementById("orient_portrait").style.display="none";
				document.getElementById("orient_landscape").style.display="block";
				break;
			case -90 :
				document.getElementById("orient_portrait").style.display="none";
				document.getElementById("orient_landscape").style.display="block";
				break;
		}
	}
//]]>
</script>
<div id="orient_portrait" style="display:none;width:100%;height:100%;">
	세로모드일 때 출력
</div>
<div id="orient_landscape" style="display:none;width:100%;height:100%;">
	가로모드일 때 출력
</div>
</body>
</html>


Comments