테스트 사이트 - 개발 중인 베타 버전입니다

제이쿼리 모바일 orientationchange event

· 8년 전 · 2671
제이쿼리 모바일 orientationchange event



설명 : 기기 세로 / 가로 방향 이벤트
jQuery( window ).on( "orientationchange", function( event ) { ... } )

이벤트 객체의 추가 속성 :

정위
유형 : 문자열
장치의 새로운 방향. 가능한 값은 "portrait"및 "landscape"입니다.

jQuery Mobile orientationchange 이벤트는 장치 방향을 변경할 때 장치를 수직 또는 수평으로 변경하여 트리거합니다.
이 이벤트에 바인딩되면 콜백 함수에 이벤트 객체가 있습니다.
이벤트 객체에는 "portrait"또는 "landscape"와 같은 방향 속성이 있습니다.

orientationchange가 기본적으로 지원되지 않거나 $ .mobile.orientationChangeEnabled가 false로 설정된 경우 브라우저의 resize 이벤트에 바인딩됩니다.

방향 변경 타이밍

클라이언트 높이와 너비의 변경과 관련된 방향 변경 이벤트의 타이밍은 브라우저마다 다르지만 현재 구현에서는 window.orientation에서 파생 된 event.orientation에 대한 올바른 값을 제공합니다.
즉, 바인딩이 높이 및 너비 값에 종속되어있는 경우 fallback 크기 조정 코드가 바인딩을 트리거하도록하려면 $ .mobile.orientationChangeEnabled = false로 orientationChange를 비활성화해야 할 수 있습니다.

예:
오리엔테이션이 활성화 된 장치에서이 장치를 방문하여 실제 작동 상태를 확인하십시오!


<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>orientationchange demo</title>
<link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<h1 id="orientation">orientationchange Not Supported on this Device.</h1>

<script>
// Bind an event to window.orientationchange that, when the device is turned,
// gets the orientation and displays it to on screen.
$( window ).on( "orientationchange", function( event ) {
$( "#orientation" ).text( "This device is in " + event.orientation + " mode!" );
});

// You can also manually force this event to fire.
$( window ).orientationchange();
</script>

</body>
</html>

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시글 목록

번호 제목
1236
jQuery Mobile taphold event
1235
jQuery Mobile tap event
1234
jQuery Mobile swiperight event
1233
jQuery Mobile swipeleft event
1232
jQuery Mobile swipe event
1231
jQuery Mobile scrollstop event
1230
jQuery Mobile scrollstart event
1229
jQuery Mobile pageshow event
1228
jQuery Mobile pageremove event
1227
1226
1225
1224
1223
1222
1221
1220
1219
1218
1217
1216
1215
1214
1213
1212
1211
1210
1209
1208
1207