# 检测设备方向

## 处理方向（orientation）事件

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

`DeviceOrientationEvent.absolute`

`DeviceOrientationEvent.alpha`

`DeviceOrientationEvent.beta`

`DeviceOrientationEvent.gamma`

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

// Do stuff with the new orientation data
}
```

### 例子

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

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

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

.ball {
position: absolute;
top   : 90px;
left  : 90px;
width : 20px;
height: 20px;
background: green;
}``````

``````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 positioning point to the center of the ball
ball.style.top  = (maxX*x/180 - 10) + "px";
ball.style.left = (maxY*y/180 - 10) + "px";
}

## 处理移动（motion）事件

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

### 相关值解释

`DeviceMotionEvent`对象提供给web开发者设备在位置和方向上的改变速度的相关信息。这些变化信息是通过三个轴来体现的。（Orientation and motion data explained有更详细的说明。）

• `x`: 西向东
• `y`: 南向北
• `z`: 垂直地面

• `alpha`: 设备沿着垂直于屏幕（对于桌面设备则是垂直于键盘）的轴的旋转速率
• `beta`: 设备沿着屏幕（对于桌面设备则是键盘）左至右方向的轴的旋转速率(桌面设备相对于键盘)
• `gamma`: 设备沿着屏幕（对于桌面设备则是键盘）下至上方向的轴的旋转速率

## 规范

DeviceOrientation Event Specification Editor's Draft Initial specification.

## 浏览器兼容性

### `DeviceMotionEvent`

Update compatibility data on GitHub
Desktop Mobile Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Chrome Full support 11 Edge Full support ≤18 Firefox Full support 6 IE No support No Opera Full support 15 Safari Full support 5 WebView Android Full support ≤37 Chrome Android Full support 18 Firefox Android Full support 6 Opera Android Full support 14 Safari iOS Full support 4.2 Samsung Internet Android Full support 1.0 Chrome Full support 59 Edge Full support ≤79 Firefox ? IE No support No Opera ? Safari ? WebView Android Full support 59 Chrome Android Full support 59 Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android Full support 7.0 Chrome Full support Yes Edge Full support 12 Firefox Full support 6 IE No support No Opera Full support Yes Safari ? WebView Android Full support Yes Chrome Android Full support Yes Firefox Android Full support 6 Opera Android ? Safari iOS Full support 4.2 Samsung Internet Android Full support Yes Chrome Full support Yes Edge Full support 12 Firefox Full support 6 IE No support No Opera Full support Yes Safari ? WebView Android Full support Yes Chrome Android Full support Yes Firefox Android Full support 6 Opera Android Full support Yes Safari iOS Full support 4.2 Samsung Internet Android Full support Yes Chrome Full support Yes Edge Full support 12 Firefox Full support 6 IE No support No Opera Full support Yes Safari ? WebView Android Full support Yes Chrome Android Full support Yes Firefox Android Full support 6 Opera Android Full support Yes Safari iOS Full support 4.2 Samsung Internet Android Full support Yes Chrome Full support Yes Edge Full support 12 Firefox Full support 6 IE No support No Opera Full support Yes Safari ? WebView Android Full support Yes Chrome Android Full support Yes Firefox Android Full support 6 Opera Android Full support Yes Safari iOS Full support 4.2 Samsung Internet Android Full support Yes

### Legend

Full support
Full support
No support
No support
Compatibility unknown
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.

### `DeviceOrientationEvent`

Update compatibility data on GitHub
Desktop Mobile Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Chrome Full support 7Notes Full support 7Notes Notes Before version 50, Chrome provided absolute values instead of relative values for this event. Developers still needing absolute values may use the `ondeviceorientationabsolute` event. Edge Full support ≤18 Firefox Full support 6Notes Full support 6Notes Notes Firefox 3.6, 4, and 5 supported `mozOrientation` instead of the standard DeviceOrientationEvent interface. IE No support No Opera Full support 15 Safari Full support 5 WebView Android Full support ≤37Notes Full support ≤37Notes Notes Before version 50, Chrome provided absolute values instead of relative values for this event. Developers still needing absolute values may use the `ondeviceorientationabsolute` event. Chrome Android Full support 18Notes Full support 18Notes Notes Before version 50, Chrome provided absolute values instead of relative values for this event. Developers still needing absolute values may use the `ondeviceorientationabsolute` event. Firefox Android Full support 6Notes Full support 6Notes Notes Firefox 3.6, 4, and 5 supported `mozOrientation` instead of the standard DeviceOrientationEvent interface. Opera Android Full support 14 Safari iOS Full support 4.2 Samsung Internet Android Full support 1.0Notes Full support 1.0Notes Notes Before Samsung Internet 5.0, Samsung Internet provided absolute values instead of relative values for this event. Developers still needing absolute values may use the `ondeviceorientationabsolute` event. Chrome Full support 59 Edge Full support ≤79 Firefox ? IE No support No Opera ? Safari ? WebView Android Full support 59 Chrome Android Full support 59 Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android Full support 7.0 Chrome Full support 7 Edge Full support 12 Firefox Full support 6 IE No support No Opera Full support Yes Safari ? WebView Android Full support Yes Chrome Android Full support Yes Firefox Android Full support 6 Opera Android Full support Yes Safari iOS Full support 4.2 Samsung Internet Android Full support Yes Chrome Full support 7 Edge Full support 12 Firefox Full support 6 IE No support No Opera Full support Yes Safari ? WebView Android Full support Yes Chrome Android Full support Yes Firefox Android Full support 6 Opera Android Full support Yes Safari iOS Full support 4.2 Samsung Internet Android Full support Yes Chrome Full support 7 Edge Full support 12 Firefox Full support 6 IE No support No Opera Full support Yes Safari ? WebView Android Full support Yes Chrome Android Full support Yes Firefox Android Full support 6 Opera Android Full support Yes Safari iOS Full support 4.2 Samsung Internet Android Full support Yes Chrome Full support 7 Edge Full support 12 Firefox Full support 6 IE No support No Opera Full support Yes Safari ? WebView Android Full support Yes Chrome Android Full support Yes Firefox Android Full support 6 Opera Android Full support Yes Safari iOS Full support 4.2 Samsung Internet Android Full support Yes

### Legend

Full support
Full support
No support
No support
Compatibility unknown
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
See implementation notes.
See implementation notes.