开发虚拟或增强现实 Web 应用的开发者无疑熟悉 DeviceOrientationEvent
。对于新手而言,“This End Up:使用设备屏幕方向”提供了一个很好的概览,介绍了 deviceorientation
事件监听器如何响应设备的扭转和旋转。
在较低版本的 Chrome 中,DeviceOrientationEvent
中包含的 alpha
、beta
和 gamma
值以相对于地球坐标系的 absolute
度提供。若要提供绝对度数,需要使用设备的磁力计传感器检测地球磁场,而这会受到附近磁场的波动影响,从而导致读数出现偏差。实际上,这可能会导致 Web 应用因附近有磁铁而注册大量 DeviceOrientationEvent
,即使设备本身实际上并未移动。对于仅关心跟踪屏幕方向变化的虚拟现实应用,这种磁噪声是坏消息。
具体变化
从 Chrome 50 开始,DeviceOrientationEvent
中包含的度数默认不再相对于地球坐标系的绝对值。这意味着,只有在设备的加速度计和陀螺仪的某种组合检测到实际移动时,才应触发 DeviceOrientationEvent
。磁力计以及因磁场波动而产生的错误读数不在图中。
但我仍然需要绝对度数!
如果您编写的 JavaScript 需要使用绝对度数(例如,在需要直接映射到现实世界的增强现实 Web 应用中),也不用担心。之前的行为(取决于设备的磁强计)可通过新的 deviceorientationabsolute
事件使用。从开发者的角度来看,它类似于现有的 DeviceOrientationEvent
,并且保证 absolute
属性将设置为 true
。
检测支持的内容
如果开发者更喜欢使用绝对度数,可以使用功能检测来确定其所用的浏览器是否支持新的 DeviceOrientationAbsoluteEvent
事件:
if ('ondeviceorientationabsolute' in window) {
// We can listen for the new deviceorientationabsolute event.
} else if ('ondeviceorientation' in window) {
// We can still listen for deviceorientation events.
// The `absolute` property of the event tells us whether
// or not the degrees are absolute.
}
跨浏览器兼容性
DeviceOrientationEvent
中报告的值从未保持一致。
iOS 上的 Safari 和 Firefox 使用相对值来表示角度,这与 Chrome 50 中引入的实现变更一致。这项变更应该会使 Web 应用与以 iOS 为目标平台编写的应用更加一致。
Firefox(在 iOS 以外的平台上)、Edge 和 Chrome 50 之前的版本在具有适当传感器的设备上运行时,会使用 DeviceOrientationEvent
的绝对度数值。
截至撰写本文时,Chrome 50 是首个支持新 DeviceOrientationAbsoluteEvent
的浏览器。
使用 DeviceMotionEvent 进行高级屏幕方向跟踪
Boris Smus 撰写了一篇极其详细的文章,详细介绍了使用 DeviceOrientationEvent
的一些缺点,以及如何使用 DeviceMotionEvent
实现自定义传感器融合。它们可提供对加速度计和陀螺仪的低级访问权限,并可为用户提供更准确的虚拟现实体验。