JQuery Mobile orientationchange event用法及代碼示例

orientationchange event

添加的版本：1.0

說明：設備縱向/橫向事件

```
jQuery( window ).on( "orientationchange", function( event ) { ... } )
```
event object 上的其他屬性：
- orientation
  
  類型：String
  
  設備的新方向。可能的值為 "portrait" 和 "landscape" 。

jQuery Mobile orientationchange 事件在設備方向改變時觸發，無論是垂直還是水平轉動設備。當綁定到此事件時，回調函數具有事件對象。事件對象包含一個等於 "portrait" 或 "landscape" 的 orientation 屬性。

請注意，當本機不支持 orientationchange 或 $.mobile.orientationChangeEnabled 設置為 false 時，我們會綁定到瀏覽器的調整大小事件。

方向改變時機

orientationchange 事件與客戶端高度和寬度變化相關的時間在瀏覽器之間是不同的，盡管當前的實現將為您提供從 window.orientation 派生的 event.orientation 的正確值。這意味著如果您的綁定依賴於高度和寬度值，您可能希望與 $.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.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css">
  <script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.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>

演示：

相關用法

注：本文由純淨天空篩選整理自jquerymobile.com大神的英文原創作品 orientationchange event。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。