越来越多支持web功能的设备拥有检测自身方向的能力了;也就是说,这些设备可以记录下其受地心引力作用下而在方向上产生变化的数据。特别地,通过这些数据,像手机等一些手持设备可以实现自动调整旋转角度来保持显示直立,以及当设备旋转到宽屏时(宽度大于高度),自动提供宽屏的网页效果。
有两种Javascript事件负责处理设备方向信息。第一种是DeviceOrientationEvent
,它会在加速度传感器检测到设备在方向上产生变化时触发。通过处理该事件传来的数据信息,使针对由于用户移动设备引起旋转和仰角变化的行为设计交互响应成为可能。
第二种是DeviceMotionEvent
,它会在加速度发生改变时触发。跟DeviceOrientationEvent
不同,DeviceMotionEvent
监听的是加速度的变化而不是方向。传感器通常都具有监听DeviceMotionEvent
的能力,包括笔记本中用于保护移动存储设备的传感器。而能监听DeviceOrientationEvent
事件的传感器更多出现在移动设备中。
处理方向(orientation)事件
要接收设备方向变化信息,你只需要注册监听deviceorientation
事件:
window.addEventListener("deviceorientation", handleOrientation, true);
注册完事件监听处理函数后(对应这个例子中的handleOrientation),监听函数会定期地接收到最新的设备方向数据。
方向事件对象中包含四个值:
DeviceOrientationEvent.absolute
下面是一个事件处理函数的例子:
function handleOrientation(orientData) { var absolute = orientData.absolute; var alpha = orientData.alpha; var beta = orientData.beta; var gamma = orientData.gamma; // Do stuff with the new orientation data }
相关值解释
关于每一个轴的记录值表示的是相对于标准的坐标系,设备在某一个给定轴上的旋转量。Orientation and motion data explained 这篇文章有更详细的描述,下面是对这篇文章的总结。
DeviceOrientationEvent.alpha
表示设备沿z轴上的旋转角度,范围为0~360。DeviceOrientationEvent.beta
表示设备在x轴上的旋转角度,范围为-180~180。它描述的是设备由前向后旋转的情况。DeviceOrientationEvent.gamma
表示设备在y轴上的旋转角度,范围为-90~90。它描述的是设备由左向右旋转的情况。
例子
这个例子会成功运行在支持检测自己方向的设备中的支持deviceorientation
事件的浏览器中。
想象一下花园(garden)中的一个球(ball):
<div class="garden">
<div class="ball"></div>
</div>
<pre class="output"></pre>
花园只有200px宽(很小对吧),球在中央:
.garden {
position: relative;
width : 200px;
height: 200px;
border: 5px solid #CCC;
border-radius: 10px;
}
.ball {
position: absolute;
top : 90px;
left : 90px;
width : 20px;
height: 20px;
background: green;
border-radius: 100%;
}
现在,如果我们移动设备,球将随之移动:
var ball = document.querySelector('.ball');
var garden = document.querySelector('.garden');
var output = document.querySelector('.output');
var maxX = garden.clientWidth - ball.clientWidth;
var maxY = garden.clientHeight - ball.clientHeight;
function handleOrientation(event) {
var x = event.beta; // In degree in the range [-180,180]
var y = event.gamma; // In degree in the range [-90,90]
output.innerHTML = "beta : " + x + "\n";
output.innerHTML += "gamma: " + y + "\n";
// Because we don't want to have the device upside down
// We constrain the x value to the range [-90,90]
if (x > 90) { x = 90};
if (x < -90) { x = -90};
// To make computation easier we shift the range of
// x and y to [0,180]
x += 90;
y += 90;
// 10 is half the size of the ball
// It center the positioning point to the center of the ball
ball.style.top = (maxX*x/180 - 10) + "px";
ball.style.left = (maxY*y/180 - 10) + "px";
}
window.addEventListener('deviceorientation', handleOrientation);
输出结果:
警告: Chrome 和 Firefox 处理角度的机制不同,所以某些轴上的方向是相反的。
处理移动(motion)事件
移动事件的处理跟方向事件是一样的,除了他们有自己的事件名:devicemotion
window.addEventListener("devicemotion", handleMotion, true);
真正不同的是做为参数传递给HandleMotion函数的DeviceMotionEvent
对象所包含的信息。
这个对象包含四个属性:
DeviceMotionEvent.acceleration
DeviceMotionEvent.accelerationIncludingGravity
DeviceMotionEvent.rotationRate
DeviceMotionEvent.interval
相关值解释
DeviceMotionEvent
对象提供给web开发者设备在位置和方向上的改变速度的相关信息。这些变化信息是通过三个轴来体现的。(Orientation and motion data explained有更详细的说明。)
acceleration
和 accelerationIncludingGravity
,都包含下面三个轴:
x
: 西向东y
: 南向北z
: 垂直地面
rotationRate
, the situation is a bit different; the information corresponds to the following in each case:
rotationRate的情况有点不同:
alpha
: 设备沿着垂直屏幕的轴的旋转速率 (桌面设备相对于键盘)beta
: 设备沿着屏幕左至右方向的轴的旋转速率(桌面设备相对于键盘)gamma
: 设备沿着屏幕下至上方向的轴的旋转速率(桌面设备相对于键盘)
最后,interval
表示的是从设备获取数据的频率,单位是毫秒。
Specifications
Specification | Status | Comment |
---|---|---|
Device Orientation Events | Working Draft | Initial specification. |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
DeviceOrientationEvent |
7.0 | 3.6[1] 6 |
? | ? | ? |
DeviceMotionEvent |
(Yes) | 6 | ? | ? | ? |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
DeviceOrientationEvent |
3.0 | 3.6[1] 6 |
Not supported | Not supported | 4.2 |
DeviceMotionEvent |
(Yes) | 6 | ? | ? | ? |
Gecko implementation notes
- Firefox 3.6, 4, and 5 supported mozOrientation versus the standard
DeviceOrientationEvent
event
See also
DeviceOrientationEvent
DeviceMotionEvent
- The legacy
MozOrientation
event. - Orientation and motion data explained
- Using deviceorientation in 3D Transforms