path: root/files/zh-tw/web/api/detecting_device_orientation/index.html

---
title: 偵測裝置方向
slug: Web/API/Detecting_device_orientation
translation_of: Web/API/Detecting_device_orientation
---
<div>{{SeeCompatTable}}</div>

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

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

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

<h2 id="處理方向事件">處理方向事件</h2>

<p>若要開始接收方向變換的情形，只要監聽 {{event("deviceorientation")}} 事件即可：</p>

<div class="note">
<p><strong>Note</strong>: <a href="https://github.com/dorukeker/gyronorm.js">gyronorm.js</a> is a polyfill for normalizing the accelerometer and gyroscope data on mobile devices. This is useful for overcoming some of the differences in device support for device orientation.</p>
</div>

<pre class="brush: js">window.addEventListener("deviceorientation", handleOrientation, true);
</pre>

<p>在註冊了事件監聽器（Event listener。本範例使用 <code>handleOrientation()</code> 函式）之後，將以更新過的方向資料而定期呼叫你的監聽器函式。</p>

<p>方向事件共有 4 組值：</p>

<ul>
 <li>{{ domxref("DeviceOrientationEvent.absolute") }}</li>
 <li>{{ domxref("DeviceOrientationEvent.alpha") }}</li>
 <li>{{ domxref("DeviceOrientationEvent.beta") }}</li>
 <li>{{ domxref("DeviceOrientationEvent.gamma") }}</li>
</ul>

<p>事件處理器（Event handler）函式則如下列：</p>

<pre class="brush: js">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
}
</pre>

<h3 id="方向值說明">方向值說明</h3>

<p>所回報的各個軸線值，均是以標準座標而呈現對應各軸線的旋轉量 (Amount of rotation)。可參閱下方所提供的<a href="/DOM/Orientation_and_motion_data_explained" title="Orientation and motion data explained">方向與動向資料說明</a>文章以獲得詳細資訊。</p>

<ul>
 <li>{{domxref("DeviceOrientationEvent.alpha")}} 值為裝置的 z 軸動向 (Motion)，介於 0 ~ 360 度之間。</li>
 <li>{{domxref("DeviceOrientationEvent.beta")}} 值為裝置的 x 軸動向，介於 -180 ~ 180 度之間，代表裝置的前後動向。</li>
 <li>{{domxref("DeviceOrientationEvent.gamma")}} 值為裝置的 y 軸動向，介於 -90 ~ 90 度之間，代表裝置的左右動向。</li>
</ul>

<h3 id="方向範例">方向範例</h3>

<p>只要瀏覽器支援 {{event("deviceorientation")}} 事件，且該執行裝置可偵測自己的方向，均可使用此範例。</p>

<p>先想像花園裡有 1 顆球：</p>

<pre class="brush: html">&lt;div class="garden"&gt;
  &lt;div class="ball"&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;pre class="output"&gt;&lt;/pre&gt;
</pre>

<p>這座花園為 200 像素寬（對，一座小花園），球就位在正中央：</p>

<pre class="brush: css">.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%;
}
</pre>

<p>現在只要移動裝置，球也會跟著移動：</p>

<pre class="brush: js">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 &gt;  90) { x =  90};
  if (x &lt; -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 positioning 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);
</pre>

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

<div>{{EmbedLiveSample('Orientation_example', '230', '260')}}</div>

<div class="warning">
<p><strong>警告：</strong>Chrome 與 Firefox 處理角度的方式不同，所以某些軸線可能方向顛倒。</p>
</div>

<h2 id="處理動向事件">處理動向事件</h2>

<p>動向事件與方向事件的處理方式完全相同，但動向事件擁有自己的名稱：{{event("devicemotion")}}</p>

<pre class="brush: js">window.addEventListener("devicemotion", <em>handleMotion</em>, true);</pre>

<p>真正改變的是由 {{domxref("DeviceMotionEvent")}} 物件所提供的資訊；且該物件又作為 <em>HandleMotion</em> 函式的參數。</p>

<p>動向事件共有 4 組屬性：</p>

<ul>
 <li>{{ domxref("DeviceMotionEvent.acceleration") }}</li>
 <li>{{ domxref("DeviceMotionEvent.accelerationIncludingGravity") }}</li>
 <li>{{ domxref("DeviceMotionEvent.rotationRate") }}</li>
 <li>{{ domxref("DeviceMotionEvent.interval") }}</li>
</ul>

<h3 id="動向值說明">動向值說明</h3>

<p>{{domxref("DeviceMotionEvent")}} 物件將提供「裝置位置與方向的變化速度」的相關資訊，並根據 3 組軸線 (可參閱<a href="/docs/Web/Guide/DOM/Events/Orientation_and_motion_data_explained" title="/en-US/docs/Web/Guide/DOM/Events/Orientation_and_motion_data_explained">方向與動向資料說明</a>的細節) 提供變化情形。</p>

<p>針對 {{domxref("DeviceMotionEvent.acceleration","acceleration")}} 與 {{domxref("DeviceMotionEvent.accelerationIncludingGravity","accelerationIncludingGravity")}}，這些軸線將對應：</p>

<ul>
 <li><code>x</code><code>：代表由東至西的軸線</code></li>
 <li><code>y</code><code>：代表由南至北的軸線</code></li>
 <li><code>z</code><code>：代表與地面垂直的軸線</code></li>
</ul>

<p>針對稍有差異的 {{domxref("DeviceMotionEvent.rotationRate","rotationRate")}}，則資訊將對應：</p>

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

<p>最後，{{domxref("DeviceMotionEvent.interval","interval")}} 代表以毫秒（Millisecond）為單位的時間間隔，是裝置取得資料的頻率。</p>

<h2 id="規範">規範</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('Device Orientation')}}</td>
   <td>{{Spec2('Device Orientation')}}</td>
   <td>Initial specification.</td>
  </tr>
 </tbody>
</table>

<h2 id="瀏覽器相容性">瀏覽器相容性</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Edge</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>{{domxref("DeviceOrientationEvent")}}</td>
   <td>7.0</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>3.6<sup>[1]</sup><br>
    6</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td>{{domxref("DeviceMotionEvent")}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>6</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Edge</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>{{domxref("DeviceOrientationEvent")}}</td>
   <td>3.0</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>3.6<sup>[1]</sup><br>
    6</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>4.2</td>
  </tr>
  <tr>
   <td>{{domxref("DeviceMotionEvent")}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>6</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] Firefox 3.6 to 5 supported <a href="/en-US/docs/Web/Events/MozOrientation">mozOrientation</a> versus the standard {{domxref("DeviceOrientationEvent")}} event.</p>

<h2 id="參見">參見</h2>

<ul>
 <li>{{domxref("DeviceOrientationEvent")}}</li>
 <li>{{domxref("DeviceMotionEvent")}}</li>
 <li>舊版 <a href="/docs/Web/Events/MozOrientation" title="en-US/DOM/MozOrientation">MozOrientation</a> 事件</li>
 <li><a href="/docs/Web/Guide/DOM/Events/Orientation_and_motion_data_explained" title="Orientation and motion data explained">方向與動向資料說明</a></li>
 <li><a href="/docs/Web/Guide/DOM/Events/Using_device_orientation_with_3D_transforms" title="Using Deviceorientation In 3D Transforms">於 3D Transforms 中使用 deviceorientation</a></li>
 <li><a href="/docs/Games/Workflows/HTML5_Gamedev_Phaser_Device_Orientation">Cyber Orb: 2D maze game with device orientation</a></li>
</ul>