목차
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>
결과보기
