设备动作和方向事件提供了对内置 移动设备上的加速度计、陀螺仪和罗盘。
这些事件可用于多种用途：游戏行业，例如， 角色的方向或动作。与地理定位配合使用时， 帮助创建更准确的精细导航，或提供有关 特定位置
摘要
- 检测设备哪一侧朝上以及设备如何旋转。
- 了解何时以及如何响应动作和方向事件。
哪边朝上？
如需使用设备屏幕方向和动作事件返回的数据， 请务必了解所提供的值
地球坐标系
地球坐标系（由 X、Y 和 Z 值表示）已对齐
基于重力和标准磁性方向。
| 坐标系 | |
|---|---|
X |
表示东西方向（东为正值）。 |
Y |
表示南北方向（北为正值）。 |
Z |
表示上下方向，与地面垂直 （其中 up 为正数）。 |
设备坐标系
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">设备坐标系（由 x、y 和 z 值表示）已对齐
基于设备的中心移动
| 坐标系 | |
|---|---|
X |
位于屏幕平面，正值表示右侧。 |
Y |
位于屏幕平面，正值表示向上。 |
Z |
与屏幕或键盘垂直，正向扩展 。 |
在手机或平板电脑上，设备方向基于典型的 屏幕的方向。对于手机和平板电脑，该指标取决于所使用的设备 使用竖屏模式对于台式机或笔记本电脑，屏幕方向为 与键盘相关
旋转数据
旋转数据以欧拉角的形式返回， 表示设备坐标之间的差异度数 坐标系。
Alpha 版
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">围绕 Z 轴的旋转。当顶角为 0° 时，alpha 值为 0°
设备指向正北当设备逆时针旋转时，
alpha 值增加。
Beta 版
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">围绕 x 轴的旋转。beta 值为 0°，
设备底部与地球表面等距。值
会随着设备的顶部倾向地球表面而增加。
灰度系数
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">围绕 y 轴的旋转。gamma 值为 0°，
设备的右侧边缘与地球表面等距。值
随着设备的右侧倾向地球表面而增大。
设备方向
设备屏幕方向事件会返回旋转数据，其中包括 设备前后倾斜、左右倾斜，如果是手机或笔记本电脑， 具有罗盘，表示设备面向的方向。
谨慎使用。
测试支持情况。
不要在每个方向事件发生时更新界面；请改为同步到 requestAnimationFrame。
何时使用设备屏幕方向事件
设备屏幕方向事件有多种用途。示例如下：
- 随着用户移动而更新地图。
- 细微的界面调整，例如添加视差效果。
- 与地理定位结合，可以用于精细导航。
检查支持情况并监听事件
如需监听 DeviceOrientationEvent，请先检查浏览器是否支持这些事件。然后，将事件监听器附加到 window 对象，以监听 deviceorientation 事件。
if (window.DeviceOrientationEvent) {
window.addEventListener('deviceorientation', deviceOrientationHandler, false);
document.getElementById('doeSupported').innerText = 'Supported!';
}
处理设备屏幕方向事件
在设备移动或更改时触发设备屏幕方向事件 屏幕方向。它会返回 相对于 地球坐标系。
该事件通常返回三个属性：alpha、
beta和gamma。在移动 Safari 浏览器上，一个附加参数
webkitCompassHeading
与罗盘方向一起返回。
设备动作
设备屏幕方向事件会返回旋转数据，其中包括 设备前后倾斜、左右倾斜，如果是手机或笔记本电脑， 具有罗盘，表示设备面向的方向。
在需要设备的当前动作时，使用设备动作。
rotationRate 的单位是“°/秒”。
acceleration 和 accelerationWithGravity 的单位为 m/sec2。
请注意不同浏览器实现方式之间的差异。
何时使用设备动作事件
设备动作事件有多种用途。示例如下：
- 摇晃手势以刷新数据。
- 在游戏中，让角色跳跃或移动。
- 用于健康与健身应用。
检查支持情况并监听事件
如需监听 DeviceMotionEvent，请先检查事件是否
。然后，将事件监听器附加到 window。
对象监听 devicemotion 事件。
if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion', deviceMotionHandler);
setTimeout(stopJump, 3 * 1000);
}
处理设备动作事件
设备动作事件会定期触发，并返回 旋转角度（以°/秒为单位）和加速度（以米/秒为单位2） 设备的实际情况某些设备没有相应的硬件 来排除重力的影响
该事件会返回四个属性：
accelerationIncludingGravity、
acceleration，其中排除了
重力、rotationRate 和 interval。
例如，我们来看一下放在平坦桌子上的一部手机， 屏幕朝上。
| 州 | 旋转 | 加速度 (m/s2) | 重力加速度 (m/s2) |
|---|---|---|---|
| 没有移动 | [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] |
相反地，如果拿着手机，使屏幕与 并且直接对观看者可见：
| 州 | 旋转 | 加速度 (m/s2) | 重力加速度 (m/s2) |
|---|---|---|---|
| 没有移动 | [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!按钮时，用户被告知跳跃。在此期间， 网页存储最大（和最小）加速度值，并在 跳跃，告知用户其最大加速度。