?
This document uses PHP Chinese website manual Release
為了更好地為移動(dòng)設(shè)備服務(wù)，HTML 5推出了一系列針對(duì)移動(dòng)設(shè)備的API。
Viewport
Geolocation API
getCurrentPosition方法
watchPosition方法和clearWatch方法
Vibration API
Luminosity API
Orientation API
參考鏈接
Viewport
Viewport指的是網(wǎng)頁的顯示區(qū)域，也就是不借助滾動(dòng)條的情況下，用戶可以看到的部分網(wǎng)頁大小，中文譯為“視口”。正常情況下，viewport和瀏覽器的顯示窗口是一樣大小的。但是，在移動(dòng)設(shè)備上，兩者可能不是一樣大小。
比如，手機(jī)瀏覽器的窗口寬度可能是640像素，這時(shí)viewport寬度就是640像素，但是網(wǎng)頁寬度有950像素，正常情況下，瀏覽器會(huì)提供橫向滾動(dòng)條，讓用戶查看窗口容納不下的310個(gè)像素。另一種方法則是，將viewport設(shè)成950像素，也就是說，瀏覽器的顯示寬度還是640像素，但是網(wǎng)頁的顯示區(qū)域達(dá)到950像素，整個(gè)網(wǎng)頁縮小了，在瀏覽器中可以看清楚全貌。這樣一來，手機(jī)瀏覽器就可以看到網(wǎng)頁在桌面瀏覽器上的顯示效果。
viewport縮放規(guī)則，需要在HTML網(wǎng)頁的head部分指定。
<head> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/> </head>
上面代碼指定，viewport的縮放規(guī)則是，縮放到當(dāng)前設(shè)備的屏幕寬度（device-width），初始縮放比例（initial-scale）為1倍，禁止用戶縮放（user-scalable）。
viewport 全部屬性如下。
width: viewport寬度
height: viewport高度
initial-scale: 初始縮放比例
maximum-scale: 最大縮放比例
minimum-scale: 最小縮放比例
user-scalable: 是否允許用戶縮放
其他的例子如下。
<meta name = "viewport" content = "width = 320, initial-scale = 2.3, user-scalable = no">
Geolocation API
Geolocation接口用于獲取用戶的地理位置。它使用的方法基于GPS或者其他機(jī)制（比如IP地址、Wifi熱點(diǎn)、手機(jī)基站等）。
下面的方法，可以檢查瀏覽器是否支持這個(gè)接口。
if(navigator.geolocation) {
// 支持
} else {
// 不支持
}
這個(gè)API的支持情況非常好，所有瀏覽器都支持（包括IE 9+），所以上面的代碼不是很必要。
getCurrentPosition方法
getCurrentPosition方法，用來獲取用戶的地理位置。使用它需要得到用戶的授權(quán)，瀏覽器會(huì)跳出一個(gè)對(duì)話框，詢問用戶是否許可當(dāng)前頁面獲取他的地理位置。必須考慮兩種情況的回調(diào)函數(shù)：一種是同意授權(quán)，另一種是拒絕授權(quán)。如果用戶拒絕授權(quán)，會(huì)拋出一個(gè)錯(cuò)誤。
navigator.geolocation.getCurrentPosition(geoSuccess,geoError);
上面代碼指定了處理當(dāng)前地理位置的兩個(gè)回調(diào)函數(shù)。
（1）同意授權(quán)
如果用戶同意授權(quán)，就會(huì)調(diào)用geoSuccess。
function geoSuccess(event) {
console.log(event.coords.latitude + ', ' + event.coords.longitude);
}
geoSuccess的參數(shù)是一個(gè)event對(duì)象。event有兩個(gè)屬性：timestamp和coords。timestamp屬性是一個(gè)時(shí)間戳，返回獲得位置信息的具體時(shí)間。coords屬性指向一個(gè)對(duì)象，包含了用戶的位置信息，主要是以下幾個(gè)值：
coords.latitude：緯度
coords.longitude：經(jīng)度
coords.accuracy：精度
coords.altitude：海拔
coords.altitudeAccuracy：海拔精度（單位：米）
coords.heading：以360度表示的方向
coords.speed：每秒的速度（單位：米）
大多數(shù)桌面瀏覽器不提供上面列表的后四個(gè)值。
（2）拒絕授權(quán)
如果用戶拒絕授權(quán)，就會(huì)調(diào)用getCurrentPosition方法指定的第二個(gè)回調(diào)函數(shù)geoError。
function geoError(event) {
console.log("Error code " + event.code + ". " + event.message);
}
geoError的參數(shù)也是一個(gè)event對(duì)象。event.code屬性表示錯(cuò)誤類型，有四個(gè)值：
0：未知錯(cuò)誤，瀏覽器沒有提示出錯(cuò)的原因，相當(dāng)于常量event.UNKNOWN_ERROR。
1：用戶拒絕授權(quán)，相當(dāng)于常量event.PERMISSION_DENIED。
2：沒有得到位置，GPS或其他定位機(jī)制無法定位，相當(dāng)于常量event.POSITION_UNAVAILABLE。
3：超時(shí)，GPS沒有在指定時(shí)間內(nèi)返回結(jié)果，相當(dāng)于常量event.TIMEOUT。
(3)設(shè)置定位行為
getCurrentPosition方法還可以接受一個(gè)對(duì)象作為第三個(gè)參數(shù)，用來設(shè)置定位行為。
var option = {
enableHighAccuracy : true,
timeout : Infinity,
maximumAge : 0
};
navigator.geolocation.getCurrentPosition(geoSuccess, geoError, option);
這個(gè)參數(shù)對(duì)象有三個(gè)成員：
enableHighAccuracy：如果設(shè)為true，就要求客戶端提供更精確的位置信息，這會(huì)導(dǎo)致更長(zhǎng)的定位時(shí)間和更大的耗電，默認(rèn)設(shè)為false。
Timeout：等待客戶端做出回應(yīng)的最大毫秒數(shù)，默認(rèn)值為Infinity（無限）。
maximumAge：客戶端可以使用緩存數(shù)據(jù)的最大毫秒數(shù)。如果設(shè)為0，客戶端不讀取緩存；如果設(shè)為infinity，客戶端只讀取緩存。
watchPosition方法和clearWatch方法
watchPosition方法可以用來監(jiān)聽用戶位置的持續(xù)改變，使用方法與getCurrentPosition方法一樣。
var watchID = navigator.geolocation.watchPosition(geoSuccess,geoError, option);
一旦用戶位置發(fā)生變化，就會(huì)調(diào)用回調(diào)函數(shù)geoSuccess。這個(gè)回調(diào)函數(shù)的事件對(duì)象，也包含timestamp和coords屬性。
watchPosition和getCurrentPosition方法的不同之處在于，前者返回一個(gè)表示符，后者什么都不返回。watchPosition方法返回的標(biāo)識(shí)符，用于供clearWatch方法取消監(jiān)聽。
navigator.geolocation.clearWatch(watchID);
Vibration API
Vibration接口用于在瀏覽器中發(fā)出命令，使得設(shè)備振動(dòng)。顯然，這個(gè)API主要針對(duì)手機(jī)，適用場(chǎng)合是向用戶發(fā)出提示或警告，游戲中尤其會(huì)大量使用。由于振動(dòng)操作很耗電，在低電量時(shí)最好取消該操作。
使用下面的代碼檢查該接口是否可用。目前，只有Chrome和Firefox的Android平臺(tái)最新版本支持它。
navigator.vibrate = navigator.vibrate
|| navigator.webkitVibrate
|| navigator.mozVibrate
|| navigator.msVibrate;
if (navigator.vibrate) {
// 支持
}
vibrate方法可以使得設(shè)備振動(dòng)，它的參數(shù)就是振動(dòng)持續(xù)的毫秒數(shù)。
navigator.vibrate(1000);
上面的代碼使得設(shè)備振動(dòng)1秒鐘。
vibrate方法還可以接受一個(gè)數(shù)組作為參數(shù)，表示振動(dòng)的模式。偶數(shù)位置的數(shù)組成員表示振動(dòng)的毫秒數(shù)，奇數(shù)位置的數(shù)組成員表示等待的毫秒數(shù)。
navigator.vibrate([500, 300, 100]);
上面代碼表示，設(shè)備先振動(dòng)500毫秒，然后等待300毫秒，再接著振動(dòng)500毫秒。
vibrate是一個(gè)非阻塞式的操作，即手機(jī)振動(dòng)的同時(shí)，JavaScript代碼繼續(xù)向下運(yùn)行。要停止振動(dòng)，只有將0毫秒或者一個(gè)空數(shù)組傳入vibrate方法。
navigator.vibrate(0); navigator.vibrate([]);
如果要讓振動(dòng)一直持續(xù)，可以使用setInterval不斷調(diào)用vibrate。
var vibrateInterval;
function startVibrate(duration) {
navigator.vibrate(duration);
}
function stopVibrate() {
if(vibrateInterval) clearInterval(vibrateInterval);
navigator.vibrate(0);
}
function startPeristentVibrate(duration, interval) {
vibrateInterval = setInterval(function() {
startVibrate(duration);
}, interval);
}
Luminosity API
Luminosity API用于屏幕亮度調(diào)節(jié)，當(dāng)移動(dòng)設(shè)備的亮度傳感器感知外部亮度發(fā)生顯著變化時(shí)，會(huì)觸發(fā)devicelight事件。目前，只有Firefox部署了這個(gè)API。
window.addEventListener('devicelight', function(event) {
console.log(event.value + 'lux');
});
上面代碼表示，devicelight事件的回調(diào)函數(shù)，接受一個(gè)事件對(duì)象作為參數(shù)。該對(duì)象的value屬性就是亮度的流明值。
這個(gè)API的一種應(yīng)用是，如果亮度變強(qiáng)，網(wǎng)頁可以顯示黑底白字，如果亮度變?nèi)酰W(wǎng)頁可以顯示白底黑字。
window.addEventListener('devicelight', function(e) {
var lux = e.value;
if(lux < 50) {
document.body.className = 'dim';
}
if(lux >= 50 && lux <= 1000) {
document.body.className = 'normal';
}
if(lux > 1000) {
document.body.className = 'bright';
}
});
CSS下一個(gè)版本的Media Query可以單獨(dú)設(shè)置亮度，一旦瀏覽器支持，就可以用來取代Luminosity API。
@media (light-level: dim) {
/* 暗光環(huán)境 */
}
@media (light-level: normal) {
/* 正常光環(huán)境 */
}
@media (light-level: washed) {
/* 明亮環(huán)境 */
}
Orientation API
Orientation API用于檢測(cè)手機(jī)的擺放方向（豎放或橫放）。
使用下面的代碼檢測(cè)瀏覽器是否支持該API。
if (window.DeviceOrientationEvent) {
// 支持
} else {
// 不支持
}
一旦設(shè)備的方向發(fā)生變化，會(huì)觸發(fā)deviceorientation事件，可以對(duì)該事件指定回調(diào)函數(shù)。
window.addEventListener("deviceorientation", callback);
回調(diào)函數(shù)接受一個(gè)event對(duì)象作為參數(shù)。
function callback(event){
console.log(event.alpha);
console.log(event.beta);
console.log(event.gamma);
}
上面代碼中，event事件對(duì)象有alpha、beta和gamma三個(gè)屬性，它們分別對(duì)應(yīng)手機(jī)擺放的三維傾角變化。要理解它們，就要理解手機(jī)的方向模型。當(dāng)手機(jī)水平擺放時(shí)，使用三個(gè)軸標(biāo)示它的空間位置：x軸代表橫軸、y軸代表豎軸、z軸代表垂直軸。event對(duì)象的三個(gè)屬性就對(duì)應(yīng)這三根軸的旋轉(zhuǎn)角度。
alpha：表示圍繞z軸的旋轉(zhuǎn)，從0到360度。當(dāng)設(shè)備水平擺放時(shí)，頂部指向地球的北極，alpha此時(shí)為0。
beta：表示圍繞x軸的旋轉(zhuǎn)，從-180度到180度。當(dāng)設(shè)備水平擺放時(shí)，beta此時(shí)為0。
gramma：表示圍繞y軸的選擇，從-90到90度。當(dāng)設(shè)備水平擺放時(shí)，gramma此時(shí)為0。
參考鏈接
Ryan Stewart, Using the Geolocation API
Rathnakanya K. Srinivasan, HTML5 Geolocation
Craig Buckler, How to Use the HTML5 Vibration API
Tomomi Imura, Responsive UI with Luminosity Level
Aurelio De Rosa, An Introduction to the Geolocation API
David Walsh, Vibration API
Ahmet Mermerkaya, Using Device Orientation in HTML5