Chrome 50 即将更改设备屏幕方向

杰夫·波斯尼克
Jeff Posnick

无疑,开发虚拟或增强现实 Web 应用的开发者都熟悉 DeviceOrientationEvent。对于新手,“This End Up: Using Device Orientation”详细概述了 deviceorientation 事件监听器如何响应设备的扭转和转动。

在早期版本的 Chrome 中,DeviceOrientationEvent 中包含的 alphabetagamma 值以相对于地球坐标系的 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 中引入的实现变化一致。此更改应该会使与针对 iOS 编写的 Web 应用更加一致。

在具有适当传感器的设备上运行时,Firefox(在 iOS 以外的平台上)、Edge 和 50 之前的 Chrome 版本会使用 DeviceOrientationEvent 的绝对度数值。

撰写本文时,Chrome 50 是首款支持新 DeviceOrientationAbsoluteEvent 的浏览器。

使用 DeviceMotionEvent 进行高级屏幕方向跟踪

Boris Smus 上一篇非常详尽的文章,详细介绍了使用 DeviceOrientationEvent 的一些缺点,以及如何使用 DeviceMotionEvent 实现定制的传感器融合。它们可让用户在低层级访问加速度计和陀螺仪,从而获得更准确的虚拟现实体验。

其他资源