taoliujun / blog

https://taoliujun.github.io/blog/
https://taoliujun.github.io/blog/
0 stars 0 forks source link

Web API - Device Orientation #81

Open taoliujun opened 3 months ago

taoliujun commented 3 months ago

Device Orientation

MDN: https://developer.mozilla.org/en-US/docs/Web/API/Device_orientation_events

Device Orientation用于获取设备的方向、和运动信息。移动设备的加速度传感器、陀螺仪、指南针等组件为浏览器提供了一系列运动信息,可以监听事件获取到相关信息。

三轴指的是手机沿着北方向竖向平放在桌子上,左右是X轴,上下是Y轴,高低是Z轴。

接口

下面的接口里的数据概念有所类似但又有细节差异,使用时仔细参考官方文档。

DeviceMotionEvent

设备的加速度和旋转速率的变化事件。包含以下信息:

DeviceMotionEventAcceleration

设备在三个轴上的加速度量的变化事件。包含以下信息:

DeviceMotionEventRotationRate

设备在三个轴的旋转速率的变化事件。包含以下信息:

DeviceOrientationEvent

设备物理方向的变化事件。包含了以下信息:

方法和属性

Event.devicemotion

事件监听,返回DeviceMotionEvent

Event.deviceorientation

事件监听,返回DeviceOrientationEvent

Event.deviceorientationabsolute

事件监听,返回DeviceOrientationEvent

示例

示例:https://taoliujun.github.io/example/web-api/Device_orientation_events/index.html