偵測裝置方向

摘要

目前支援 Web 的裝置，已有越來越多可偵測本身的方向 (Orientation)；也就是說，這些裝置可根據重力牽引的相對關係而改變其畫面方向，同時回報該筆資料。特別是如行動電話的手持式裝置，同樣會判斷這種資訊而自動旋轉其畫面。如此除了能保持正向畫面之外，裝置橫放時亦能以寬螢幕呈現網頁內容。

現有 2 組 JavaScript 事件可處理方向資訊。第一個是 DeviceOrientationEvent 事件。只要加速規偵測到裝置方向的變化，隨即送出此事件。在接收並處理這些方向事件所回報的資料之後，即可針對使用者移動裝置所造成的方向與高度變化，確實做出回應。

第二個為 DeviceMotionEvent 事件。只要加速過程產生變化，隨即送出該事件。此事件用以監聽加速過程的變化，因此不同於 DeviceOrientationEvent 的方向變化。如筆記型電腦中的感測器，一般均能夠偵測 DeviceMotionEvent 而保護移動中的儲存裝置。DeviceOrientationEvent 則較常用於行動裝置。

處理方向事件

若要開始接收方向變換的情形，只要監聽 deviceorientation 事件即可：

window.addEventListener("deviceorientation", handleOrientation, true);

在註冊了事件監聽器 (Event listener。本範例則使用「handleOrientation()」的 JavaScript 函式) 之後，將以更新過的方向資料而定期呼叫你的監聽器函式。

方向事件共有 4 組值：

• DeviceOrientationEvent.absolute
• DeviceOrientationEvent.alpha
• DeviceOrientationEvent.beta
• DeviceOrientationEvent.gamma

事件處理器 (Event handler) 函式則如下列：

function handleOrientation(event) {
  var absolute = event.absolute;
  var alpha    = event.alpha;
  var beta     = event.beta;
  var gamma    = event.gamma;

  // Do stuff with the new orientation data
}

方向值說明

所回報的各個軸線值，均是以標準座標而呈現對應各軸線的旋轉量 (Amount of rotation)。可參閱下方所提供的方向與動向資料說明文章以獲得詳細資訊。

• DeviceOrientationEvent.alpha 值為裝置的 z 軸動向 (Motion)，介於 0 ~ 360 度之間。
• DeviceOrientationEvent.beta 值為裝置的 x 軸動向，介於 -180 ~ 180 度之間，代表裝置的前後動向。
• DeviceOrientationEvent.gamma 值為裝置的 y 軸動向，介於 -90 ~ 90 度之間，代表裝置的左右動向。

方向範例

只要瀏覽器支援 deviceorientation 事件，且該執行裝置可偵測自己的方向，均可使用此範例。

先想像花園裡有 1 顆球：

<div class="garden">
  <div class="ball"></div>
</div>

<pre class="output"></pre>

這座花園為 200 像素寬 (對，一座小花園)，球就位在正中央：

.garden {
  position: relative;
  width : 200px;
  height: 200px;
  border: 5px solid #CCC;
  border-radius: 10px;
}

.ball {
  position: absolute;
  top   : 90px;
  left  : 90px;
  width : 20px;
  height: 20px;
  background: green;
  border-radius: 100%;
}

現在只要移動裝置，球也會跟著移動：

var ball   = document.querySelector('.ball');
var garden = document.querySelector('.garden');
var output = document.querySelector('.output');

var maxX = garden.clientWidth  - ball.clientWidth;
var maxY = garden.clientHeight - ball.clientHeight;

function handleOrientation(event) {
  var x = event.beta;  // In degree in the range [-180,180]
  var y = event.gamma; // In degree in the range [-90,90]

  output.innerHTML  = "beta : " + x + "\n";
  output.innerHTML += "gamma: " + y + "\n";

  // Because we don't want to have the device upside down
  // We constrain the x value to the range [-90,90]
  if (x >  90) { x =  90};
  if (x < -90) { x = -90};

  // To make computation easier we shift the range of 
  // x and y to [0,180]
  x += 90;
  y += 90;

  // 10 is half the size of the ball
  // It center the positionning point to the center of the ball
  ball.style.top  = (maxX*x/180 - 10) + "px";
  ball.style.left = (maxY*y/180 - 10) + "px";
}

window.addEventListener('deviceorientation', handleOrientation);

這裡有即時結果 (若無法顯示，可至本文右上角切換回英文原文觀看)：

處理動向事件

動向事件與方向事件的處理方式完全相同，但動向事件擁有自己的名稱：devicemotion

window.addEventListener("devicemotion", handleMotion, true);

真正改變的是由 DeviceMotionEvent 物件所提供的資訊；且該物件又作為 HandleMotion 函式的參數。

動向事件共有 4 組屬性：

• DeviceMotionEvent.acceleration
• DeviceMotionEvent.accelerationIncludingGravity
• DeviceMotionEvent.rotationRate
• DeviceMotionEvent.interval

動向值說明

DeviceMotionEvent 物件將提供「裝置位置與方向的變化速度」的相關資訊，並根據 3 組軸線 (可參閱方向與動向資料說明的細節) 提供變化情形。

針對 acceleration 與 accelerationIncludingGravity，這些軸線將對應：

• x：代表由東至西的軸線
• y：代表由南至北的軸線
• z：代表與地面垂直的軸線

針對稍有差異的 rotationRate，則資訊將對應：

• alpha：代表與螢幕 (或桌機的鍵盤) 垂直的軸線之旋轉率
• beta：代表與螢幕平面 (或桌機的鍵盤) 由左至右軸線之旋轉率
• gamma：代表與螢幕平面 (或桌機的鍵盤) 由下至上軸線之旋轉率

最後，interval 代表以毫秒 (Millisecond) 為單位的時間間隔，是裝置取得資料的頻率。

規格

瀏覽器相容性

Gecko 建構說明

1. Firefox 3.6、4、5 均支援 mozOrientation。尚未支援標準的 DeviceOrientationEvent 事件。

另可參閱

• DeviceOrientationEvent
• DeviceMotionEvent
• 舊版 MozOrientation 事件
• 方向與動向資料說明
• 於 3D Transforms 中使用 deviceorientation