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

제이쿼리 모바일 orientationchange event

· 8년 전 · 2669
제이쿼리 모바일 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>

댓글 작성

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

로그인하기

게시글 목록

번호 제목
1296
1295
1294
1293
1292
1291
1290
1289
jQuery Mobile navigate 이벤트
1288
1287
jQuery Mobile hashchange event
1286
1285
1284
1283
1282
1281
1280
1279
1278
1277
1276
1275
1274
1273
1272
1271
1270
1269
1268
1267