閱讀(8.2k) 書簽贊(2) 我要糾錯

JavaScript 移動設(shè)備API

2018-07-24 11:53 更新

Permission API

很多操作需要用戶許可，比如腳本想要知道用戶的位置，或者操作用戶機器上的攝像頭。

Permissions API就是用來查詢某個接口的許可情況。

// 查詢地理位置接口的許可情況
navigator.permissions.query({ name: 'geolocation' })
.then(function(result) {
  // 狀態(tài)為 prompt，表示查詢地理位置時，
  // 用戶會得到提示，是否許可本次查詢
  /* result.status = "prompt" */

  // 狀態(tài)為 granted，表示用戶已經(jīng)給予了許可
  /* result.status = "granted" */
});

有了這個API，就可以自動查詢用戶的態(tài)度。當用戶已經(jīng)明確拒絕的時候，就可以不必再次詢問用戶許可了。

Viewport

Viewport指的是網(wǎng)頁的顯示區(qū)域，也就是不借助滾動條的情況下，用戶可以看到的部分網(wǎng)頁大小，中文譯為“視口”。正常情況下，viewport和瀏覽器的顯示窗口是一樣大小的。但是，在移動設(shè)備上，兩者可能不是一樣大小。

比如，手機瀏覽器的窗口寬度可能是640像素，這時viewport寬度就是640像素，但是網(wǎng)頁寬度有950像素，正常情況下，瀏覽器會提供橫向滾動條，讓用戶查看窗口容納不下的310個像素。另一種方法則是，將viewport設(shè)成950像素，也就是說，瀏覽器的顯示寬度還是640像素，但是網(wǎng)頁的顯示區(qū)域達到950像素，整個網(wǎng)頁縮小了，在瀏覽器中可以看清楚全貌。這樣一來，手機瀏覽器就可以看到網(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ī)則是，縮放到當前設(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或者其他機制（比如IP地址、Wifi熱點、手機基站等）。

下面的方法，可以檢查瀏覽器是否支持這個接口。

if(navigator.geolocation) { 
   // 支持
} else {
   // 不支持
}

這個API的支持情況非常好，所有瀏覽器都支持（包括IE 9+），所以上面的代碼不是很必要。

getCurrentPosition方法

getCurrentPosition方法，用來獲取用戶的地理位置。使用它需要得到用戶的授權(quán)，瀏覽器會跳出一個對話框，詢問用戶是否許可當前頁面獲取他的地理位置。必須考慮兩種情況的回調(diào)函數(shù)：一種是同意授權(quán)，另一種是拒絕授權(quán)。如果用戶拒絕授權(quán)，會拋出一個錯誤。

navigator.geolocation.getCurrentPosition(geoSuccess,geoError);

上面代碼指定了處理當前地理位置的兩個回調(diào)函數(shù)。

（1）同意授權(quán)

如果用戶同意授權(quán)，就會調(diào)用geoSuccess。

function geoSuccess(event) {
   console.log(event.coords.latitude + ', ' + event.coords.longitude);
}

geoSuccess的參數(shù)是一個event對象。event有兩個屬性：timestamp和coords。timestamp屬性是一個時間戳，返回獲得位置信息的具體時間。coords屬性指向一個對象，包含了用戶的位置信息，主要是以下幾個值：

coords.latitude：緯度
coords.longitude：經(jīng)度
coords.accuracy：精度
coords.altitude：海拔
coords.altitudeAccuracy：海拔精度（單位：米）
coords.heading：以360度表示的方向
coords.speed：每秒的速度（單位：米）

大多數(shù)桌面瀏覽器不提供上面列表的后四個值。

（2）拒絕授權(quán)

如果用戶拒絕授權(quán)，就會調(diào)用getCurrentPosition方法指定的第二個回調(diào)函數(shù)geoError。

function geoError(event) { 
   console.log("Error code " + event.code + ". " + event.message);
}

geoError的參數(shù)也是一個event對象。event.code屬性表示錯誤類型，有四個值：

0：未知錯誤，瀏覽器沒有提示出錯的原因，相當于常量event.UNKNOWN_ERROR。
1：用戶拒絕授權(quán)，相當于常量event.PERMISSION_DENIED。
2：沒有得到位置，GPS或其他定位機制無法定位，相當于常量event.POSITION_UNAVAILABLE。
3：超時，GPS沒有在指定時間內(nèi)返回結(jié)果，相當于常量event.TIMEOUT。

(3)設(shè)置定位行為

getCurrentPosition方法還可以接受一個對象作為第三個參數(shù)，用來設(shè)置定位行為。

var option = {
            enableHighAccuracy : true,
            timeout : Infinity,
            maximumAge : 0
        };

navigator.geolocation.getCurrentPosition(geoSuccess, geoError, option);

這個參數(shù)對象有三個成員：

enableHighAccuracy：如果設(shè)為true，就要求客戶端提供更精確的位置信息，這會導致更長的定位時間和更大的耗電，默認設(shè)為false。
Timeout：等待客戶端做出回應的最大毫秒數(shù)，默認值為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ā)生變化，就會調(diào)用回調(diào)函數(shù)geoSuccess。這個回調(diào)函數(shù)的事件對象，也包含timestamp和coords屬性。

watchPosition和getCurrentPosition方法的不同之處在于，前者返回一個表示符，后者什么都不返回。watchPosition方法返回的標識符，用于供clearWatch方法取消監(jiān)聽。

navigator.geolocation.clearWatch(watchID);

Vibration API

Vibration接口用于在瀏覽器中發(fā)出命令，使得設(shè)備振動。顯然，這個API主要針對手機，適用場合是向用戶發(fā)出提示或警告，游戲中尤其會大量使用。由于振動操作很耗電，在低電量時最好取消該操作。

使用下面的代碼檢查該接口是否可用。目前，只有Chrome和Firefox的Android平臺最新版本支持它。

navigator.vibrate = navigator.vibrate
  || navigator.webkitVibrate
  || navigator.mozVibrate
  || navigator.msVibrate;

if (navigator.vibrate) {
  // 支持
}

vibrate方法可以使得設(shè)備振動，它的參數(shù)就是振動持續(xù)的毫秒數(shù)。

navigator.vibrate(1000);

上面的代碼使得設(shè)備振動1秒鐘。

vibrate方法還可以接受一個數(shù)組作為參數(shù)，表示振動的模式。偶數(shù)位置的數(shù)組成員表示振動的毫秒數(shù)，奇數(shù)位置的數(shù)組成員表示等待的毫秒數(shù)。

navigator.vibrate([500, 300, 100]);

上面代碼表示，設(shè)備先振動500毫秒，然后等待300毫秒，再接著振動100毫秒。

vibrate是一個非阻塞式的操作，即手機振動的同時，JavaScript代碼繼續(xù)向下運行。要停止振動，只有將0毫秒或者一個空數(shù)組傳入vibrate方法。

navigator.vibrate(0);
navigator.vibrate([]);

如果要讓振動一直持續(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é)，當移動設(shè)備的亮度傳感器感知外部亮度發(fā)生顯著變化時，會觸發(fā)devicelight事件。目前，只有Firefox部署了這個API。

window.addEventListener('devicelight', function(event) {
  console.log(event.value + 'lux');
});

上面代碼表示，devicelight事件的回調(diào)函數(shù)，接受一個事件對象作為參數(shù)。該對象的value屬性就是亮度的流明值。

這個API的一種應用是，如果亮度變強，網(wǎng)頁可以顯示黑底白字，如果亮度變?nèi)?，網(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下一個版本的Media Query可以單獨設(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用于檢測手機的擺放方向（豎放或橫放）。

使用下面的代碼檢測瀏覽器是否支持該API。


if (window.DeviceOrientationEvent) {
  // 支持
} else {
  // 不支持
}

一旦設(shè)備的方向發(fā)生變化，會觸發(fā)deviceorientation事件，可以對該事件指定回調(diào)函數(shù)。


window.addEventListener("deviceorientation", callback);

回調(diào)函數(shù)接受一個event對象作為參數(shù)。


function callback(event){
	console.log(event.alpha);
	console.log(event.beta);
	console.log(event.gamma);
}

上面代碼中，event事件對象有alpha、beta和gamma三個屬性，它們分別對應手機擺放的三維傾角變化。要理解它們，就要理解手機的方向模型。當手機水平擺放時，使用三個軸標示它的空間位置：x軸代表橫軸、y軸代表豎軸、z軸代表垂直軸。event對象的三個屬性就對應這三根軸的旋轉(zhuǎn)角度。

alpha：表示圍繞z軸的旋轉(zhuǎn)，從0到360度。當設(shè)備水平擺放時，頂部指向地球的北極，alpha此時為0。
beta：表示圍繞x軸的旋轉(zhuǎn)，從-180度到180度。當設(shè)備水平擺放時，beta此時為0。
gramma：表示圍繞y軸的選擇，從-90到90度。當設(shè)備水平擺放時，gramma此時為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

以上內(nèi)容是否對您有幫助：

← JavaScript Performance API

JavaScript 概述 →

寫筆記

我要補充