Chrome 50 即將變更裝置方向

開發虛擬或擴增實境網頁應用程式的開發人員,無疑都熟悉 DeviceOrientationEvent。對於新手來說,「This End Up: Using Device Orientation」一文提供了很好的概略說明,說明 deviceorientation 事件監聽器如何回應裝置的旋轉動作。

在早期版本的 Chrome 中,DeviceOrientationEvent 中包含的 alphabetagamma 值會以 absolute 度數相對於地球座標架構提供。提供絕對度數需要使用裝置的磁力儀感應器偵測地球磁場,而磁場可能會受到附近磁場的波動影響,導致讀數不準確。實際上,即使裝置本身並未移動,附近的磁鐵仍可能導致網頁應用程式註冊大量 DeviceOrientationEvent。對於只在意追蹤方向變化的虛擬實境應用程式而言,這種磁性雜訊是個壞消息。

異動內容

自 Chrome 50 起,DeviceOrientationEvent 中包含的度數預設不再以地球座標架構為絕對值。也就是說,只有在裝置的加速計和陀螺儀偵測到實際移動時,才應觸發 DeviceOrientationEvent。磁力計和磁場變化造成的錯誤讀數,都不會影響這項功能。

但我還是需要絕對度數!

如果您要編寫需要使用絕對度數的 JavaScript (例如需要直接對應至實體世界的擴增實境網頁應用程式),也不必擔心。先前的行為 (取決於裝置的磁力計) 可透過新的 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 為開發目標的網頁應用程式更加一致。

在裝置上使用適當的傳感器時,Firefox (在 iOS 以外的平台上)、Edge 和 Chrome 50 以下版本會為 DeviceOrientationEvent 使用絕對度數值。

截至本文撰寫時,Chrome 50 是第一個支援新 DeviceOrientationAbsoluteEvent 的瀏覽器。

使用 DeviceMotionEvent 進行進階方向追蹤

Boris Smus 撰寫了一篇詳細的文章,詳細說明使用 DeviceOrientationEvent 的部分缺點,以及如何使用 DeviceMotionEvent 實作專屬的感應器融合。這些 API 可提供對加速計和陀螺儀的低階存取權,並為使用者提供更精確的虛擬實境體驗。

其他資源