移動(dòng)設(shè)備API

2021-09-15 15:19 更新

為了更好地為移動(dòng)設(shè)備服務(wù)，HTML 5推出了一系列針對移動(dòng)設(shè)備的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è)對話框，詢問用戶是否許可當(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對象。event有兩個(gè)屬性：timestamp和coords。timestamp屬性是一個(gè)時(shí)間戳，返回獲得位置信息的具體時(shí)間。coords屬性指向一個(gè)對象，包含了用戶的位置信息，主要是以下幾個(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對象。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è)對象作為第三個(gè)參數(shù)，用來設(shè)置定位行為。

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

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

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

  • enableHighAccuracy：如果設(shè)為true，就要求客戶端提供更精確的位置信息，這會(huì)導(dǎo)致更長的定位時(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ù)的事件對象，也包含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主要針對手機(jī)，適用場合是向用戶發(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è)事件對象作為參數(shù)。該對象的value屬性就是亮度的流明值。

這個(gè)API的一種應(yīng)用是，如果亮度變強(qiáng)，網(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下一個(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用于檢測手機(jī)的擺放方向（豎放或橫放）。

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

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

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

window.addEventListener("deviceorientation", callback);

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

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

上面代碼中，event事件對象有alpha、beta和gamma三個(gè)屬性，它們分別對應(yīng)手機(jī)擺放的三維傾角變化。要理解它們，就要理解手機(jī)的方向模型。當(dāng)手機(jī)水平擺放時(shí)，使用三個(gè)軸標(biāo)示它的空間位置：x軸代表橫軸、y軸代表豎軸、z軸代表垂直軸。event對象的三個(gè)屬性就對應(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。

參考鏈接

以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)