设备方向事件

安全上下文: 此项功能仅在一些支持的浏览器安全上下文(HTTPS)中可用。

设备方向事件是允许你检测设备的方向以及允许你检测设备的移动的事件。

概念和用法

移动设备通常带有陀螺仪、指南针和加速计等传感器,可让设备上运行的应用程序检测设备的方向和运动。

设备方向事件允许你编写的 Web 应用程序可以根据用户设备的方向改变行为,并在用户移动设备时做出反应。

可能需要使用设备方向事件的一些典型特性包括:

  • 在基于 Web 的游戏中,使用户能够通过倾斜和移动设备来控制游戏中人物或物体的运动;
  • 在地图应用中,根据设备的位置调整地图方向,或提供随用户移动而更新的逐向导航;
  • 用于手势识别——例如,识别“摇一摇”手势并利用它执行某些操作,如当用户摇动设备时清除输入区域。

备注: 这些 API 在移动浏览器中被广泛支持。然而某些纯桌面浏览器可能会因硬件差异而受到限制,鉴于该应用程序接口主要用于配备了传感器的设备,这些限制很少有意义。

接口

DeviceMotionEvent

指示了设备加速度和旋转速率的变化。

DeviceMotionEventAcceleration

指示设备沿所有三个轴的加速度。

DeviceMotionEventRotationRate

指示设备绕所有三个轴旋转的速率。

DeviceOrientationEvent

代表设备物理方向的变化。

其他接口的扩展

devicemotion 事件

每隔一定时间触发一次,以显示设备当时受到的物理加速力大小以及设备的旋转速度。

deviceorientation 事件

当从设备获得设备当前方位与地球坐标框架相比较后的新数据时触发。

deviceorientationabsolute 事件

设备绝对方向发生变化时触发。

规范

Specification
Device Orientation and Motion

浏览器兼容性

api.Window.deviceorientation_event

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
deviceorientation event

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Uses a non-standard name.
Has more compatibility info.

api.Window.devicemotion_event

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
devicemotion event

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

api.Window.deviceorientationabsolute_event

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
deviceorientationabsolute event

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

api.DeviceOrientationEvent

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
DeviceOrientationEvent
DeviceOrientationEvent() constructor
absolute
alpha
beta
gamma
requestPermission() static method
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.

api.DeviceMotionEvent

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
DeviceMotionEvent
DeviceMotionEvent() constructor
acceleration
accelerationIncludingGravity
interval
requestPermission() static method
Experimental
rotationRate

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.

api.DeviceMotionEventAcceleration

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
DeviceMotionEventAcceleration
x
y
z

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

api.DeviceMotionEventRotationRate

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
DeviceMotionEventRotationRate
alpha
beta
gamma

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

参见