幾個有趣的WEB設備API（二）

瀏覽器和設備之間還有很多有趣的接口，

1.屏幕朝向接口

 瀏覽器有兩種方法來監聽屏幕朝向，看是橫屏還是豎屏。

（1）使用css媒體查詢的方法

 

/* 豎屏 */
@media screen and (orientation: portrait) {
  div{
    width: 100%;
  }
}

/* 橫屏 */

@media screen and (orientation: landscape) {
  div{
    height: 100%;
  }

 

（2）利用js調用屏幕朝向接口

 

screen.addEventListener("orientationchange", function () {
  console.log("屏幕的方向是: " + screen.orientation.angle);
});

 例子：demo

2.設備朝向接口

 通過這個接口可以監聽設備朝向及旋轉，以便自動調節放心，這個接口有兩個：

(1) DeviceOrientationEvent:監聽方向變化

window.addEventListener("deviceorientation", operate, true);

operate會接收一個對象，對象含有4個屬性分別是：

function opertate(orientData) {
  var absolute = orientData.absolute;
  var alpha = orientData.alpha;//z軸上的旋轉角度（0~360）
  var beta = orientData.beta;//x軸的旋轉角度（-180~180）
  var gamma = orientData.gamma;//y軸上的旋轉角度（-90-90）
}

　　

(2) DeviceMotinEvent：監聽加速度變化

window.addEventListener("devicemotion", operate, true);

operate同樣會接收一個對象，有4個屬性

acceleration 和 accelerationIncludingGravity都是去除重力后的加速度，包括3組數據
x: 左向右
y: 下到上
z: 垂直地面

rotationRate包含3組數據：

alpha:垂直旋轉速率
beta: 左至右的軸的旋轉速率
gamma: 從下至上方向的軸的旋轉速率

intervali:i是從設備獲取數據的頻率（ms）

 

利用以上的api我們可以監聽設備的移動方向，從而做出更加具有交互感的h5頁面和游戲。

例子：demo

3.地理位置接口（https）

瀏覽器可以直接獲取到用戶的地理位置接口，返回用戶的經緯度，拿着這個經緯度可以到百度或者騰訊地圖開發的接口去查詢用戶的位置，

為了安全考慮，使用這個接口之前會先征求用戶的許可。

但是現在限制只能在https的鏈接中使用，安卓的微信中還可以繼續使用，但是ios10中也要求必須是https。

navigator.geolocation(succ,error,option); //這個接口異步獲取用戶的地理位置

(1)獲取成功之后調用第一個參數定義的succ函數，

(2)如果調用失敗則調用第二個參數定義的error函數，並返回錯誤代碼error.code 和error.message

error.code:1  用戶拒絕顯示位置
error.code:2  獲取位置失敗
error.code:3  請求超時
error.code:4  未知錯誤

(3)option：可選，用來設定是否獲取高精度定位,等待請求時間和最長定位緩存時間。

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

l

navigator.geolocation.getCurrentPosition(function(position) {
　　alert(position.coords.latitude, position.coords.longitude);//獲取緯度、精度
});

地理位置還有一個接口：navigator.geolocation.watchPosition(succ,error,option);//監聽用戶的位置    

這個接口會在用戶位置變化時，自動調用。

var watchID = navigator.geolocation.watchPosition(function(position) {
  alert(position.coords.latitude, position.coords.longitude);
});

清除監聽

navigator.geolocation.clearWatch(watchID);

　　

　　

 

 

 

 

內容原創，轉載請注明出處：

作者：Jess_喵

來源：http://www.cnblogs.com/zhangwenjiajessy/p/6246021.html