목차
- orientationchange 예제 - 장치 방향 바뀜 이벤트
- orientationchange 정의
- orientationchange 구문
- orientationchange 예제 - 장치 방향에 따라 (글자내용/배경색) 변경
※ 이벤트 효과 확인하려면, 화면 자동 회전 지원되는 스마트폰으로 확인.
orientationchange 예제 - 장치 방향 바뀜 이벤트
<script>
screen.addEventListener("orientationchange", function() {
alert("현재 기기 방향: " + screen.orientation);
});
</script>
orientationchange 정의
장치 방향 바뀜 이벤트.
- 세로 모드 (= portrait 모드)
- 가로 모드 (= landscape 모드)
1.
- interface 이벤트 일종
- 이벤트확산: X
- 취소가능성: X
- 이벤트타겟: Screen
- 기본행위: None
2. 예제 더 보기
https://www.w3.org/TR/screen-orientation/#event-handlers
[이벤트 내장 속성]
target
- 읽기 전용.
- EventTarget타입.
- 이벤트 대상(DOM 트리의 최상위 대상)
type
- 읽기 전용.
- DOMString타입.
- 이벤트 유형
bubbles
- 읽기 전용
- Boolean타입
- 이벤트가 보통 확산하는지 여부
cancelable
- 읽기 전용.
- Boolean타입
- 이벤트가 취소 가능한지 여부
orientationchange 구문
JS 속성 방식
screen.onorientationchange = homzzang();
JS 메서드 방식
screen.addEventListener("orientationchange", homzzang);
orientationchange 예제 - 장치 방향에 따라 (글자내용/배경색) 변경
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).on("pagecreate",function(event){
$(window).on("orientationchange",function(){
if(window.orientation == 0) {
$("p").text("장치 방향이 세로모드(= portrait)로 바뀜.").css({"background-color":"yellow","font-size":"300%"});
} else {
$("p").text("장치 방향이 가로모드(= landscape)로 바뀜.").css({"background-color":"pink","font-size":"200%"});
}
});
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>홈짱닷컴 Homzzang.com</h1>
</div>
<div data-role="main" class="ui-content">
<p>홈페이지 제작관리 강의</p>
</div>
<div data-role="footer">
<h1>Since 2012</h1>
</div>
</div>
</body>
</html>
결과보기
