先通过上面两个链接，了解一下两个事件。
DeviceOrientationEvent 获取设备方向；
DeviceMotionEvent 获取设备移动速度。
苹果的文档里面简单描述了几个参数、返回值和相关的方法，但是没有写例子。
下面是一个摇一摇变颜色的例子，可以了解一下用法。
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" name="viewport">
<title>摇一摇变颜色</title>
<script type="text/javascript">
var color = new Array('#fff', '#fA0', '#f00', '#C00', '#03f', '#0ff');
if(window.DeviceMotionEvent) {
var speed = 20;
var x = y = z = lastX = lastY = lastZ = 0;
window.addEventListener('devicemotion', function(){
var acceleration =event.accelerationIncludingGravity;
x = acceleration.x;
y = acceleration.y;
if(Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed) {
document.body.style.backgroundColor = color[Math.round(Math.random()*10)%6];
}
lastX = x;
lastY = y;
}, false);
}
</script>
</head>
<body>
<h1>摇一摇变颜色</h1>
</body>
</html>
devicemotion事件包含的方法有：
type
devicemotion的事件类型。
bubbles
指定该事件的冒泡事件。
cancelable
关闭该事件。
acceleration
设备移动的加速度，分为x、y、z三轴。
accelerationIncludingGravity
设备移动的重力加速度，分为x、y、z三轴。
rotationRate
设备旋转速度，包括alpha、beta、gamma三个参数。
interval
距离上次收到回调通知的时间间隔。
deviceorientation事件包含的方法有：
type
deviceorientation的事件类型。
bubbles
指定该事件的冒泡事件。
cancelable
关闭该事件。
alpha
在围绕 z 轴旋转时（即左右旋转时），y 轴的度数差。
beta
在围绕 x 轴旋转时（即前后旋转时），z 轴的度数差。
gamma
在围绕 y 轴旋转时（即扭转设备时），z 轴的度数差。
compassHeading
与正北方向的角度差值。正北为0度，正东为90度，正南为180度，正西为270度。因为0度是正北，所以叫指北针，不是指南针。
compassAccuracy
指北针的精确度，表示偏差为正负多少度。一般是10。
如果要了解的更详细，还有两个参考文章。
参考文章：
http://blog.csdn.net/hursing/article/details/9061991
http://blog.csdn.net/hursing/article/details/9046837