裝置動作和螢幕方向事件可讓您存取行動裝置內建的加速計、陀螺儀和指南針。
這些事件有多種用途，例如在遊戲中控制角色的方向或動作。與地理位置搭配使用時，可協助建立更準確的即時路況導航，或提供特定位置的相關資訊。
摘要
- 偵測裝置的哪一側朝上，以及裝置的旋轉方式。
- 瞭解何時及如何回應動作和方向事件。
哪一邊朝上？
如要使用裝置方向和動作事件傳回的資料，請務必瞭解提供的值。
地球座標框架
地球座標框架由 X、Y 和 Z 值描述，會根據重力和標準磁性方向對齊。
| 座標系統 | |
|---|---|
X |
代表東西方向 (東方為正)。 |
Y |
代表南北方向 (北為正)。 |
Z |
代表上下方向，垂直於地面 (向上為正)。 |
裝置座標框架
裝置座標框架 (由 x、y 和 z 值描述) 會根據裝置中心對齊。
| 座標系統 | |
|---|---|
X |
在螢幕平面上，正值向右。 |
Y |
在螢幕平面上，正值朝向頂端。 |
Z |
與螢幕或鍵盤垂直，正值向外延伸。 |
在手機或平板電腦上，裝置的方向取決於螢幕的一般方向。如果是手機和平板電腦，則會以裝置處於直向模式為準。如果是桌上型或筆記型電腦，則會根據鍵盤判斷方向。
輪替資料
旋轉資料會以歐拉角的形式傳回，代表裝置座標框架與地球座標框架之間的度數差異。
Alpha 值
繞 z 軸旋轉。當裝置頂端指向正北時，alpha 值為 0°。當裝置逆時針旋轉時，alpha 值會增加。
Beta 版
沿 X 軸旋轉。當裝置頂端和底部與地球表面的距離相等時，beta 值為 0°。當裝置頂端朝向地球表面傾斜時，這個值會增加。
Gamma
沿 Y 軸旋轉。當裝置左右邊緣與地球表面的距離相等時，gamma 值為 0°。當右側朝向地球表面傾斜時，這個值會增加。
裝置螢幕方向
裝置方向事件會傳回旋轉資料，包括裝置前後和左右傾斜的程度，以及裝置面向的方向 (如果手機或筆電有指南針)。
請斟酌使用。測試支援情形。請勿在每次螢幕方向事件發生時更新 UI，而是同步至 requestAnimationFrame。
裝置方向事件的使用時機
裝置螢幕方向事件有多種用途，相關示例包括：
- 隨著使用者移動更新地圖。
- 微調 UI，例如加入視差效果。
- 結合地理位置資訊，可用於即時路況導航。
檢查支援情形並監聽事件
如要監聽 DeviceOrientationEvent，請先確認瀏覽器是否支援事件。接著，將事件監聽器附加至 window 物件，監聽 deviceorientation 事件。
if (window.DeviceOrientationEvent) {
window.addEventListener('deviceorientation', deviceOrientationHandler, false);
document.getElementById('doeSupported').innerText = 'Supported!';
}
處理裝置螢幕方向事件
當裝置移動或變更方向時，系統會觸發裝置方向事件。系統會傳回裝置目前位置與地球座標框架之間的差異資料。
事件通常會傳回三個屬性：alpha、beta 和 gamma。在行動版 Safari 上，系統會傳回額外的參數 webkitCompassHeading 和指南針方向。
裝置動作
裝置方向事件會傳回旋轉資料，包括裝置前後和左右傾斜的程度，以及裝置面向的方向 (如果手機或筆電有指南針)。
如需裝置目前的動作，請使用裝置動作。rotationRate 的單位為度/秒。
acceleration 和 accelerationWithGravity 的單位為公尺/秒2。請注意瀏覽器實作之間的差異。
裝置動作事件的使用時機
裝置動作事件有多種用途。相關示例包括：
- 搖動手勢可重新整理資料。
- 在遊戲中，讓角色跳躍或移動。
- 健康與健身應用程式。
檢查支援情形並監聽事件
如要監聽 DeviceMotionEvent，請先確認瀏覽器是否支援事件。接著，將事件監聽器附加至 window 物件，監聽 devicemotion 事件。
if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion', deviceMotionHandler);
setTimeout(stopJump, 3 * 1000);
}
處理裝置動作事件
裝置動作事件會定期觸發，並傳回裝置在該時間點的旋轉 (單位為 °/秒) 和加速度 (單位為公尺/秒2) 資料。部分裝置沒有可排除重力影響的硬體。
事件會傳回四個屬性：accelerationIncludingGravity、acceleration (不含重力影響)、rotationRate 和 interval。
舉例來說，假設手機平放在桌上，螢幕朝上。
| 州 | 旋轉 | 加速度 (公尺/秒2) | 重力加速度 (公尺/秒2) |
|---|---|---|---|
| 未偵測到活動 | [0, 0, 0] | [0, 0, 0] | [0, 0, 9.8] |
| 向上延伸 | [0, 0, 0] | [0, 0, 5] | [0, 0, 14.81] |
| 只向右移動 | [0, 0, 0] | [3, 0, 0] | [3, 0, 9.81] |
| 向右上方移動 | [0, 0, 0] | [5, 0, 5] | [5, 0, 14.81] |
相反地，如果手機螢幕與地面垂直，且使用者可以直接看到螢幕：
| 州 | 旋轉 | 加速度 (公尺/秒2) | 重力加速度 (公尺/秒2) |
|---|---|---|---|
| 未偵測到活動 | [0, 0, 0] | [0, 0, 0] | [0, 9.81, 0] |
| 向上延伸 | [0, 0, 0] | [0, 5, 0] | [0, 14.81, 0] |
| 只向右移動 | [0, 0, 0] | [3, 0, 0] | [3, 9.81, 0] |
| 向右上方移動 | [0, 0, 0] | [5, 5, 0] | [5, 14.81, 0] |
範例：計算物體的最大加速度
裝置動作事件的其中一種用途是計算物體的最大加速度。例如，人跳躍時的最大加速度是多少？
if (evt.acceleration.x > jumpMax.x) {
jumpMax.x = evt.acceleration.x;
}
if (evt.acceleration.y > jumpMax.y) {
jumpMax.y = evt.acceleration.y;
}
if (evt.acceleration.z > jumpMax.z) {
jumpMax.z = evt.acceleration.z;
}
輕觸「Go!」按鈕後，系統會指示使用者跳躍。在這段期間，頁面會儲存最大 (和最小) 加速度值，並在跳躍後告知使用者最大加速度。