【譯文】在現(xiàn)代移動設(shè)備當(dāng)中，加速計、陀螺儀以及指南針已經(jīng)成為普遍存在的標(biāo)準(zhǔn)配置。在之前討論地理定位 API的文章中，我們曾經(jīng)了解過開發(fā)人員如何利用地理定位API改善用戶的使用體驗(yàn)。今天我們要著重考量的則是另一種有趣的API，即設(shè)備定向API。

對于很多應(yīng)用程序來說，檢測設(shè)備朝向都是實(shí)現(xiàn)自身功能的重要前提，從導(dǎo)航應(yīng)用到體感游戲皆在此列。不知道大家有沒有玩過移動設(shè)備上的賽車游戲，我們可以將設(shè)備當(dāng)作方向盤左右傾斜、從而實(shí)現(xiàn)對車輛的操控。

該API面向的另一類應(yīng)用程序則關(guān)注在用戶設(shè)備朝的向發(fā)生改變時，及時調(diào)整用戶界面以充分利用屏幕空間、從而帶來更為出色的使用體驗(yàn)。如果大家是YouTube的忠誠觀眾，那么肯定對這項(xiàng)功能的優(yōu)勢非常熟悉。

在今天的文章中，我將向大家介紹設(shè)備定向API，并解釋它能為我們提供怎樣的數(shù)據(jù)類型以及如何在自己開發(fā)的應(yīng)用程序中對其加以利用。

1. 設(shè)備定位API是什么？

引用W3C中的設(shè)備定位API的規(guī)范描述可知，該API“……定義了多種新型DOM事件，旨在提供與主機(jī)設(shè)備相關(guān)的物理朝向與運(yùn)動狀態(tài)信息。”由API提供的數(shù)據(jù)產(chǎn)生自多種來源，其中包括設(shè)備上的陀螺儀、加速計以及指南針等。不同的設(shè)備所配備的數(shù)據(jù)來源也有所區(qū)別，具體情況取決于其上搭載的傳感器類型。

該API從屬于W3C Working Draft，也就是說相關(guān)規(guī)范并非最終確定、在未來其具體內(nèi)容可能還會出現(xiàn)一定程度的變動。另外值得注意的是，已知該API在多種瀏覽器以及操作系統(tǒng)之上可能出現(xiàn)不一致性。舉例來說，在基于Blink渲染引擎的Chrome與Opera瀏覽器上，該API會與Windows 8系統(tǒng)產(chǎn)生deviceorientation事件的兼容性沖突。另一個實(shí)例則是，該API中的 interval屬性在Opera Mobile版本中并非恒定的常數(shù)。

2. 實(shí)際使用

該API所顯示的三個事件全部用于提供與設(shè)備定位相關(guān)的信息：

?    deviceorientation

?    devicemotion

?    compassneedscalibration

這些事件在window對象當(dāng)中執(zhí)行，也就是說我們需要為window對象附加一個處理程序。下面讓我們對這三個事件進(jìn)行逐一分析。

deviceorientation

首先出場的是deviceorientation事件，當(dāng)加速計檢測到設(shè)備方位發(fā)生改變時，它就會被觸發(fā)。正如我之前所提到，我們可以監(jiān)聽這一事件并通過為window對象附加事件處理程序?qū)θ我庾兏鞒龌貞?yīng)。當(dāng)事件處理程序介入時，它會獲得DeviceOrientationEvent type的一條參數(shù)，其中包含以下四種屬性：

?    alpha代表的是環(huán)繞z軸的角度。它的取值范圍在0到360度之間。當(dāng)設(shè)備頂端指向正北方向時，該屬性的取值為0。

?    beta代表的是環(huán)繞x軸的角度。它的取值范圍在-180到180度之間。當(dāng)設(shè)備與地球表面保持平行時，該屬性的取值為0。

?    gamma代表的是環(huán)繞y軸的角度。它的取值范圍在-90到90度之間。當(dāng)該設(shè)備與地球表面保持平行時，該屬性的取值為0。

?    absolute用于指定設(shè)備本身提供的定位數(shù)據(jù)是否與地球坐標(biāo)系相對應(yīng)。在這種情況下，大家可以將其值取為true，或者采用任意其它坐標(biāo)系作為基準(zhǔn)。

下面這幅圖片來自W3C的官方規(guī)范文件，其中標(biāo)明了前面提到的相對于設(shè)備設(shè)定的x、y與z軸。

devicemotion

每當(dāng)設(shè)備運(yùn)動狀態(tài)出現(xiàn)加速或者減速時，devicemotio事件都會被觸發(fā)。大家可以對該事件進(jìn)行監(jiān)聽，正如我們監(jiān)聽deviceorientation事件一樣。當(dāng)該事件的處理程序介入時，它會獲得來自DeviceMotionEvent type的一條參數(shù)，參數(shù)當(dāng)中包含四種屬性：

?    acceleration負(fù)責(zé)指定設(shè)備相對于地球在x、y與z軸上的加速狀況，大家可以分別通過其x、y與z屬性進(jìn)行訪問。該數(shù)值的單位為m/s2。

?    accelerationIncludingGravity與acceleration屬性所取的數(shù)值相同，但它會把地球重力因素考慮在內(nèi)。這項(xiàng)屬性的取值應(yīng)當(dāng)被用在設(shè)備硬件不知道如何去除加速數(shù)據(jù)中重力影響效果的情況下。事實(shí)上，在這類實(shí)例當(dāng)中，acceleration屬性往往不該由用戶代理提供。

?    rotationRate負(fù)責(zé)指定設(shè)備在各個軸上每秒運(yùn)動多少度。我們可以通過其alpha、beta與gamma屬性訪問rotationRate的各獨(dú)立取值。

?    interval負(fù)責(zé)指定不同數(shù)據(jù)獲取操作之間的時間間隔。一旦設(shè)定完畢，該數(shù)值就絕不能再進(jìn)行更新。它以毫秒作為計算單位。

compassneedscalibration

這個事件會在用戶代理檢測到指南針需要校準(zhǔn)時被觸發(fā)。其規(guī)范還規(guī)定，“用戶代理應(yīng)當(dāng)只在校準(zhǔn)指南針能夠增加deviceorientation事件數(shù)據(jù)準(zhǔn)確性的前提下被觸發(fā)?！痹撌录?yīng)當(dāng)被用于通知用戶指南針需要校準(zhǔn)這一情況，同時需要指導(dǎo)用戶如何完成這一調(diào)整。

3. 檢測支持能力

檢測瀏覽器或者用戶代理是否支持前面提到的兩個事件，即deviceorientation與devicemotion，本身非常簡單，只需要添加一條微不足道的狀態(tài)聲明即可。大家可以查看以下代碼片段，我們會在其中檢測對deviceorientation事件的支持能力：

 
 
 

  
  
  
if (window.DeviceOrientationEvent) { 
  
  
  
 
  
  
  
   // We can listen for change in the device's orientation... 
  
  
  
 
  
  
  
} else { 
  
  
  
 
  
  
  
   // Not supported 
  
  
  
 
  
  
  
} 

 
 
 

為了測試compassneedscalibration事件，我們要用到以下代碼片段：

 
 
 

  
  
  
if (!('oncompassneedscalibration' in window)) { 
  
  
  
   // Event supported 
  
  
  
} else { 
  
  
  
   // Event not supported 
  
  
  
} 

 
 
 

4. 瀏覽器支持能力

即使對于設(shè)備定向API的支持能力良好，我們?nèi)匀恍枰紤]到其它可能與API產(chǎn)生沖突的重要因素。除了介紹當(dāng)中提到的事項(xiàng)，absolute屬性在Mobile Safari還會出現(xiàn)undefined問題。

不過真正的問題在于，每一款能夠支持設(shè)備定向API的瀏覽器都只能實(shí)現(xiàn)部分支持。事實(shí)上，就在我撰寫這份文章的時候，仍然幾乎沒有幾種瀏覽器能夠支持compassneedscalibration事件。在Chrome或者火狐瀏覽器中執(zhí)行上述代碼片段時就會出現(xiàn)這類問題。

有鑒于此，能夠支持設(shè)備定位API的桌面版本瀏覽器包括Chrome 7及以上版本、火狐6及以上版本、Opera 15及以上版本再加上IE 11。這類支持能力在移動瀏覽器上表現(xiàn)得更好。除了前面提到過的瀏覽器之外，該API的支持能力還存在于BlackBerry 10、Opera Mobile 12及以上版本、Mobile Safari 4.2及以上版本外加Android上的Chrome 3及以上版本中。

對于目前對于設(shè)備定位API的準(zhǔn)確支持能力，我建議大家點(diǎn)擊此處查閱細(xì)節(jié)信息。

5. 演示

現(xiàn)在我們已經(jīng)明確了需要創(chuàng)建怎樣的演示應(yīng)用來利用設(shè)備定位API。這套演示實(shí)例的目的在于建立一個采用普通HTML與CSS的方塊，并在設(shè)備位置發(fā)生變化時隨之進(jìn)行轉(zhuǎn)動。

我們還需要檢索來自該API的信息，其中顯示我們獲取自設(shè)備定位API的數(shù)據(jù)類型。我們也會在原始文本中顯示信息，這是因?yàn)殡m然一部分瀏覽器能夠支持設(shè)備定位API、但CCS屬性并不能對方塊進(jìn)行渲染。舉例來講，Opera Mobile就符合這種情況。

由于已經(jīng)確定了并不是每種瀏覽器都能支持該API，因此我們還需要對該API中的每一種功能進(jìn)行支持能力測試并將結(jié)果傳達(dá)給用戶。

演示應(yīng)用的原代碼如下所示，但大家可以點(diǎn)擊此處查看運(yùn)行效果。

 
 
 

  
  
  
 
  
  
  
 
  
  
  
    
  
  
  
       
  
  
  
       
  
  
  
       
  
  
  
       
  
  
  
       
  
  
  
    
  
  
  
    
  
  
  
      
Device Orientation API
 
  
  
  
      deviceorientation event not supported 
  
  
  
      devicemotion event not supported 
  
  
  
      compassneedscalibration event not supported 
  
  
  
       
  
  
  
          
  
  
  
            1