几个有趣的WEB设备API（二）

浏览器和设备之间还有很多有趣的接口，

1.屏幕朝向接口

浏览器有两种方法来监听屏幕朝向，看是横屏还是竖屏。

（1）使用css媒体查询的方法

/* 竖屏 */
@media screen and (orientation: portrait) {
  div{
     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
}

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