手機(jī)上的環(huán)境傳感器，一般包括氣壓傳感器、溫度傳感器、濕度傳感器、光傳感器、聲音傳感器和距離傳感器等。氣壓傳感器能通過(guò)氣壓測(cè)量，判斷手機(jī)當(dāng)前位置的海拔高度，能提高GPS定位的精度，在三星Galaxy Nexus上有配備；溫度傳感器一方面用來(lái)測(cè)量氣溫，判斷當(dāng)前環(huán)境是否舒適，一方面也能監(jiān)測(cè)手機(jī)內(nèi)部溫度是否異常；而比較普遍的是光傳感器和距離傳感器，對(duì)智能手機(jī)來(lái)說(shuō)幾乎是標(biāo)配，并且一般設(shè)計(jì)位于手機(jī)正面上方聽(tīng)筒附近位置。

距離傳感器和環(huán)境光傳感器

距離傳感器由一個(gè)紅外LED燈和紅外輻射光線探測(cè)器構(gòu)成。距離傳感器位于手機(jī)的聽(tīng)筒附近的主要原因是，當(dāng)手機(jī)靠近耳朵時(shí)，系統(tǒng)通過(guò)距離傳感器知道用戶在通電話，然后會(huì)關(guān)閉顯示屏，防止用戶因誤操作影響通話。距離傳感器利用“飛行時(shí)間法”的原理來(lái)檢測(cè)與物體之間距離，它通過(guò)發(fā)射特別短的光脈沖，由被物體反射回來(lái)的時(shí)間計(jì)算而得。

手機(jī)的光傳感器，即環(huán)境光傳感器，能感知設(shè)備周圍光線情況。手機(jī)操作系統(tǒng)利用光線傳感器的數(shù)據(jù)，自動(dòng)調(diào)節(jié)顯示屏亮度—當(dāng)環(huán)境亮度高時(shí)，顯示屏亮度會(huì)相應(yīng)調(diào)高；當(dāng)環(huán)境亮度低時(shí)，顯示屏亮度也會(huì)相應(yīng)調(diào)低。自動(dòng)亮度一方面保證了手機(jī)在不同環(huán)境中的屏幕閱讀體驗(yàn)，一方面降低了電量損耗，***限度地延長(zhǎng)設(shè)備工作時(shí)間。

Proximity API

Proximity API是W3C規(guī)范中關(guān)于距離傳感器的一個(gè)獨(dú)立API，為Web開(kāi)發(fā)者提供設(shè)備與物體之間的距離信息?；谠O(shè)備的距離信息，我們能做的可不只是通話時(shí)熄滅屏幕，我可以在手機(jī)網(wǎng)頁(yè)中播放音樂(lè)時(shí)，不需要觸碰屏幕就能使音樂(lè)暫停，我也可以在手機(jī)網(wǎng)頁(yè)游戲中，像玄幻魔術(shù)般控制角色的進(jìn)退……

該API中定義了兩個(gè)設(shè)備事件deviceproximity和userproximity，前者提供設(shè)備與物體之間的距離信息，后者判斷是否感應(yīng)到有物體接近。我們先看看當(dāng)前瀏覽器是否支持：

if ('ondeviceproximity' in window) { 
// 支持返回距離信息 
} 
  
if ('onuserproximity' in window) { 
// 支持返回是否有物體靠近 
} 

deviceproximity事件提供三個(gè)屬性：value，min和max。value代表設(shè)備與設(shè)備前物體的距離，min和max代表傳感器能檢測(cè)的距離范圍，單位是厘米。

if ('ondeviceproximity' in window) { 
window.addEventListener('deviceproximity', function(event) { 
proximityValue.innerHTML = event.value; 
proximityMax.innerHTML = event.max; 
proximityMin.innerHTML = event.min; 
}); 
} 

userproximity事件有一個(gè)屬性：near。它是一個(gè)布爾值，代表是否有設(shè)備前方是否有物體靠近，默認(rèn)是false。它探測(cè)的范圍也是deviceproximity的檢測(cè)距離范圍。

if ('onuserproximity' in window) { 
window.addEventListener('userproximity', function(event) { 
inProximity.innerHTML = event.near; 
}); 
} 

通過(guò)以上兩個(gè)事件，我們能感知到設(shè)備與物體的距離信息，通過(guò)綁定網(wǎng)頁(yè)元素的控制事件，可以實(shí)現(xiàn)網(wǎng)頁(yè)上不觸摸屏幕的手勢(shì)交互。

Ambient Light API

Ambient Light API，W3C規(guī)范中關(guān)于環(huán)境光傳感器的一個(gè)獨(dú)立API，為Web開(kāi)發(fā)者提供設(shè)備感應(yīng)到的環(huán)境光強(qiáng)度的數(shù)值。該API最初提供了2個(gè)事件監(jiān)聽(tīng)設(shè)備的環(huán)境光狀況：devicelight和lightlevel。前者返回環(huán)境光強(qiáng)度的數(shù)值，使用勒克斯（lux）照度單位；后者描述當(dāng)前環(huán)境光的強(qiáng)度等級(jí)————暗淡、正常和明亮。在***的W3C規(guī)范中，已經(jīng)移除了lightlevel事件，事實(shí)上，我們完全可以通過(guò)devicelight自己來(lái)定義光的強(qiáng)度等級(jí)。

if ('ondevicelight' in window) { 
// 瀏覽器支持檢測(cè) 
window.addEventListener('devicelight', function(event) { 
// 獲取光強(qiáng)度數(shù)值 
lightValue.innerHTML = Math.round(event.value); 
}); 
} 

devicelight事件只有一個(gè)value屬性，隨著測(cè)試設(shè)備不同可能有不同的返回?cái)?shù)值，范圍從0到無(wú)窮大。基于這個(gè)環(huán)境光強(qiáng)度，我們可以在網(wǎng)頁(yè)中做到自動(dòng)切換夜間主題，盡力減緩網(wǎng)頁(yè)閱讀造成的用戶眼睛疲勞。觀察不同環(huán)境中該數(shù)值的變化，我們?cè)O(shè)定兩個(gè)主題變化的分界點(diǎn)：50lux和10000lux，因此有：

if (event.value < 50) { 
document.body.className = 'dark-theme'; 
} else if (event.value < 10000) { 
document.body.className = 'classic-theme'; 
} else { 
document.body.className = 'light-theme'; 
} 

不僅如此，在網(wǎng)頁(yè)游戲中，我們可以根據(jù)當(dāng)前環(huán)境光強(qiáng)度，匹配不同的主題場(chǎng)景作為游戲背景，烘托環(huán)境氛圍，強(qiáng)化游戲的現(xiàn)實(shí)代入感。

兼容性

遺憾的是，目前桌面和移動(dòng)瀏覽器中都僅有firefox支持Proximity API和Ambient Light API，并且桌面版對(duì)Ambient Light API的支持只限于Mac OS X系統(tǒng)中。

[圖1.2 Proximity API支持情況]

[圖1.3 Ambient Light API支持情況]