Chrome 50 即將變更裝置方向

傑夫波斯尼克
Jeff Posnick

開發虛擬或擴增實境網頁應用程式的開發人員對 DeviceOrientationEvent 已有相當熟悉的認識,針對初始的初始狀態,「This End Up: Use 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 概念撰寫的網頁應用程式更一致性。

如果是 iOS 50 之前的平台、Edge 和 Chrome 版本,在具備適當感應器的裝置上執行時,Firefox 會使用 DeviceOrientationEvent 的絕對度值。

截至本文所述,Chrome 50 是第一個支援新版 DeviceOrientationAbsoluteEvent 的瀏覽器。

使用 DeviceMotionEvent 進行進階方向追蹤

Boris Smus 提供詳細說明文章,詳細說明瞭使用 DeviceOrientationEvent 的部分缺點,以及如何使用 DeviceMotionEvent 實作自訂感應器融合。它們提供低階的加速計和陀螺儀存取權,可為使用者提供更準確的虛擬實境體驗。

其他資源