设备动作和屏幕方向事件可让您访问移动设备中的内置加速度计、陀螺仪和指南针。
这些事件可用于多种用途；例如，在游戏中，可用于控制角色的方向或动作。与地理定位功能搭配使用时，这些信息有助于创建更准确的导航路线或提供有关特定地点的信息。
摘要
- 检测设备的哪一面朝上以及设备的旋转方式。
- 了解何时以及如何响应动作和屏幕方向事件。
哪边朝上？
如需使用设备屏幕方向和动作事件返回的数据，请务必了解所提供的值。
地球坐标系
地球坐标系（由值 X、Y 和 Z 描述）根据重力和标准磁极方向进行对齐。
| 坐标系 | |
|---|---|
X |
表示东西方向（东为正方向）。 |
Y |
表示南北方向（其中北为正方向）。 |
Z |
表示垂直于地面（向上为正）的上下方向。 |
设备坐标系
设备坐标系（由值 x、y 和 z 描述）会根据设备中心进行对齐。
| 坐标系 | |
|---|---|
X |
在屏幕平面中，向右为正。 |
Y |
在屏幕平面上，正向为朝上。 |
Z |
与屏幕或键盘垂直，正方向向外延伸。 |
在手机或平板电脑上，设备的屏幕方向取决于屏幕的典型方向。对于手机和平板电脑，则取决于设备处于竖屏模式。对于台式机或笔记本电脑，屏幕方向是相对于键盘而言的。
旋转数据
旋转数据以欧拉角的形式返回，表示设备坐标系与地球坐标系之间的差异度数。
Alpha 版
绕 z 轴旋转。当设备顶部朝向正北时，alpha 值为 0°。随着设备逆时针旋转，alpha 值会增加。
Beta 版
绕 x 轴旋转的角度。当设备的顶部和底部与地球表面的距离相等时，beta 值为 0°。随着设备顶部朝向地球表面倾斜，此值会增加。
Gamma
绕 y 轴旋转。当设备的左侧和右侧边缘与地球表面的距离相等时，gamma 值为 0°。随着右侧向地球表面倾斜，该值会增加。
设备方向
设备屏幕方向事件会返回旋转数据，其中包括设备从前到后、从左到右倾斜的角度，以及（如果手机或笔记本电脑配备了罗盘）设备朝向的方向。
请谨慎使用。测试支持情况。
请勿在每次屏幕方向变化事件时更新界面，而应同步到 requestAnimationFrame。
何时使用设备屏幕方向事件
设备屏幕方向事件有几种用途。示例如下：
- 随着用户移动而更新地图。
- 细微的界面调整，例如添加视差效果。
- 可与地理定位结合使用，用于精细导航。
检查支持情况并监听事件
如需监听 DeviceOrientationEvent，请先检查浏览器是否支持这些事件。然后，将事件监听器附加到监听 deviceorientation 事件的 window 对象。
if (window.DeviceOrientationEvent) {
window.addEventListener('deviceorientation', deviceOrientationHandler, false);
document.getElementById('doeSupported').innerText = 'Supported!';
}
处理设备屏幕方向事件
当设备移动或更改屏幕方向时，系统会触发设备屏幕方向事件。它会返回有关设备当前位置相对于地球坐标系的差异的数据。
该事件通常会返回三个属性：alpha、beta 和 gamma。在移动版 Safari 中，系统会随罗盘方向一起返回一个额外的参数 webkitCompassHeading。
设备移动
设备屏幕方向事件会返回旋转数据，其中包括设备从前到后、从左到右倾斜的角度，以及（如果手机或笔记本电脑配备了罗盘）设备朝向的方向。
当需要设备的当前动作时，请使用设备动作。rotationRate 以 °/sec 提供。acceleration 和 accelerationWithGravity 以 m/sec2 提供。请注意浏览器实现之间的差异。
何时使用设备动作事件
设备动作事件有多个用途。示例如下：
- 摇晃手势可刷新数据。
- 在游戏中，用于使角色跳跃或移动。
- 适用于健康与健身应用。
检查支持情况并监听事件
如需监听 DeviceMotionEvent，请先检查浏览器是否支持这些事件。然后，将事件监听器附加到监听 devicemotion 事件的 window 对象。
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!” 按钮后，系统会提示用户跳跃。在此期间，页面会存储最大（和最小）加速度值，并在跳跃后告知用户其最大加速度。