首页 专题 H5案例 前端导航 UI框架

检测设备方向

作者:TG 日期: 2016-05-28 阅读: 1114
越来越多支持web功能的设备拥有检测自身方向的能力了;也就是说,这些设备可以记录下其受地心引力作用下而在方向上产生变化的数据。特别地,通过这些数据,像手机等一些手持设备可以实现自动调整旋转角度来保持显示直立,以及当设备旋转到宽屏时(宽度大于高度),自动提供宽屏的网页效果。

一、DeviceOrienttationEvent
当加速度传感器检测到设备在方向上产生变化时触发。

要接收设备方向变化信息,我们只需注册监听deviceorientation事件:

if(window.DeviceOrientationEvent){

  window.addEventListener("deviceorientation",handleOrientation,true)

}else{

  console.log("对不起,您的浏览器不支持Device Orientation");

}

当注册完事件监听处理函数(也就是上面的handleOrientation)后,监听函数会定期地接收到最新的设备方向数据。
方向事件对象中包含四个值:
DeviceOrientationEvent.absolute
DeviceOrientationEvent.alpha 表示设备沿 z 轴上的旋转角度,范围为0~360
DeviceOrientationEvent.beta 表示设备在 x 轴上的旋转角度,范围为-180~180。它描述的是设备由前向后旋转的情况。
DeviceOrientationEvent.gamma 表示设备在 y 轴上的旋转角度,范围为-90~90。它描述的是设备由左向右旋转的情况。
通过下面的图,可以更清晰的了解这三个数据


alpha
z 轴为轴,作用域为(0,360)


beta
x 轴为轴,作用域为(-180,180)


gamma
y 轴为轴,作用域为(-90,90)



例如:

function handleOrientation(orientData) {   

  var absolute = orientData.absolute;   

  var alpha = orientData.alpha;   

  var beta = orientData.beta;   

  var gamma = orientData.gamma;

}


二、DeviceMotionEvent
当加速度传感器检测到设备在加速度上产生变化时触发

移动事件跟方向事件一样,我们都需要注册一个监听器:

if(window.DeviceMotionEvent){

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

}

真正不同的是做为参数传递给HandleMotion函数的DeviceMotionEvent对象所包含的信息。 这个对象包含四个属性: DeviceMotionEvent.acceleration
DeviceMotionEvent.accelerationIncludingGravity
DeviceMotionEvent.rotationRate
DeviceMotionEvent.interval

acceleration 和 accelerationIncludingGravity,都包含下面三个轴: x: 西向东 y: 南向北 z: 垂直地面
rotationRate
有三个值:
alpha: 设备沿着垂直屏幕的轴的旋转速率 (桌面设备相对于键盘)
beta: 设备沿着屏幕左至右方向的轴的旋转速率(桌面设备相对于键盘)
gamma: 设备沿着屏幕下至上方向的轴的旋转速率(桌面设备相对于键盘)
interval 表示的是从设备获取数据的频率,单位是毫秒。

三、检测移动设备方向变化的方法
方法一:用触发手机的横屏和竖屏之间的切换的事件

window.addEventListener("orientationchange", function() { // 获取新方向的数值 if(window.orientation==180||window.orientation==0){ alert("竖屏状态!") } if(window.orientation==90||window.orientation==-90){ alert("横屏状态!") } }, false);

或者:

window.addEventListener("resize", function(e) {   

  // 获取新方向的数值   

  orientChk = document.documentElement.clientWidth > document.documentElement.clientHeight?'landscape':'portrait';   

  if(orientChk =='lapdscape'){   

    //这里是横屏下需要执行的事件        

  }else{   

    //这里是竖屏下需要执行的事件   

  } 

}, false);


方法二、css判断横竖屏幕

/* 横屏 */

@media screen and (orientation:portrait) { /* portrait-specific styles */ } /* 竖屏*/ @media screen and (orientation:landscape) { /* landscape-specific styles */ }

四、案例
摇一摇
var SHAKE_THRESHOLD = 3000;

var last_update = 0; 

var x = y = z = last_x = last_y = last_z = 0;


function deviceMotionHandler(eventData) {   

  var acceleration = eventData.accelerationIncludingGravity;   

  var curTime = new Date().getTime();   

  var diffTime = curTime - last_update;   

  if (diffTime > 100) {   

    last_update = curTime;   

    x = acceleration.x;   

    y = acceleration.y;   

    z = acceleration.z;   

    var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000;   

    if (speed > SHAKE_THRESHOLD) {

       //你被摇动了

    }   

    //记录上一次加速度   

    last_x = x;   

    last_y = y;   

    last_z = z;   

  }   

}      

if (window.DeviceMotionEvent) {      

  window.addEventListener('devicemotion', deviceMotionHandler, false); 

}



关注”全栈技术杂货铺“

全栈技术杂货铺