1 files changed, 278 insertions, 0 deletions
diff --git a/files/zh-tw/web/api/detecting_device_orientation/index.html b/files/zh-tw/web/api/detecting_device_orientation/index.html
new file mode 100644
index 0000000000..d81307ba57
--- /dev/null
+++ b/files/zh-tw/web/api/detecting_device_orientation/index.html
@@ -0,0 +1,278 @@
+---
+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>