手機上的環境傳感器，一般包括氣壓傳感器、溫度傳感器、濕度傳感器、光傳感器、聲音傳感器和距離傳感器等。氣壓傳感器能通過氣壓測量，判斷手機當前位置的海拔高度，能提高GPS定位的精度，在三星Galaxy Nexus上有配備；溫度傳感器一方面用來測量氣溫，判斷當前環境是否舒適，一方面也能監測手機內部溫度是否異常；而比較普遍的是光傳感器和距離傳感器，對智能手機來說幾乎是標配，并且一般設計位于手機正面上方聽筒附近位置。

距離傳感器和環境光傳感器

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

手機的光傳感器，即環境光傳感器，能感知設備周圍光線情況。手機操作系統利用光線傳感器的數據，自動調節顯示屏亮度—當環境亮度高時，顯示屏亮度會相應調高；當環境亮度低時，顯示屏亮度也會相應調低。自動亮度一方面保證了手機在不同環境中的屏幕閱讀體驗，一方面降低了電量損耗，***限度地延長設備工作時間。

Proximity API

Proximity API是W3C規范中關于距離傳感器的一個獨立API，為Web開發者提供設備與物體之間的距離信息。基于設備的距離信息，我們能做的可不只是通話時熄滅屏幕，我可以在手機網頁中播放音樂時，不需要觸碰屏幕就能使音樂暫停，我也可以在手機網頁游戲中，像玄幻魔術般控制角色的進退……

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

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

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

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

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

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

通過以上兩個事件，我們能感知到設備與物體的距離信息，通過綁定網頁元素的控制事件，可以實現網頁上不觸摸屏幕的手勢交互。

Ambient Light API

Ambient Light API，W3C規范中關于環境光傳感器的一個獨立API，為Web開發者提供設備感應到的環境光強度的數值。該API最初提供了2個事件監聽設備的環境光狀況：devicelight和lightlevel。前者返回環境光強度的數值，使用勒克斯（lux）照度單位；后者描述當前環境光的強度等級————暗淡、正常和明亮。在***的W3C規范中，已經移除了lightlevel事件，事實上，我們完全可以通過devicelight自己來定義光的強度等級。

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

devicelight事件只有一個value屬性，隨著測試設備不同可能有不同的返回數值，范圍從0到無窮大?；谶@個環境光強度，我們可以在網頁中做到自動切換夜間主題，盡力減緩網頁閱讀造成的用戶眼睛疲勞。觀察不同環境中該數值的變化，我們設定兩個主題變化的分界點：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'; 
} 

不僅如此，在網頁游戲中，我們可以根據當前環境光強度，匹配不同的主題場景作為游戲背景，烘托環境氛圍，強化游戲的現實代入感。

兼容性

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

[圖1.2 Proximity API支持情況]

[圖1.3 Ambient Light API支持情況]