그곰의 생활

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

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>

저작자표시 비영리 변경금지

'Client-side > SCRIPT' 카테고리의 다른 글

특정 로직을 백그라운드로 처리하고 처리결과를 가져오기  (0) 2012.03.16
[API] 구글 차트  (0) 2012.03.13
jQuery를 이용한 배경이 가려진 레이어 팝업 뛰우기  (0) 2011.11.17
자바스크립트 Form 생성하여 Post 전송  (3) 2011.11.15
게시물 제목+URL SNS 링크 스크립트  (0) 2011.11.07
'Client-side/SCRIPT' Related Articles more
Comments