参考:http://www.tfan.org/wp-content/slides/deviceaccess.html#1
ios:
在移动端测定以下代码,可以看到5个值的实时变化:
<!doctype html>
<html class="canvas_html">
<head>
<meta charset="utf-8">
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta name="format-detection" content="telephone=no">
<meta content="telephone=no" name="format-detection">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>摇一摇</title>
<link rel="stylesheet" href="css/reset.css">
</head>
<p>左右:<span id="alpha">0</span></p>
<p>前后:<span id="beta">0</span></p>
<p>扭转:<span id="gamma">0</span></p>
<p>指北针指向:<span id="heading">0</span>度</p>
<p>指北针精度:<span id="accuracy">0</span>度</p>
<script type="text/javascript">
function orientationHandler(event) {
document.getElementById("alpha").innerHTML = event.alpha;
document.getElementById("beta").innerHTML = event.beta;
document.getElementById("gamma").innerHTML = event.gamma;
document.getElementById("heading").innerHTML = event.webkitCompassHeading;
document.getElementById("accuracy").innerHTML = event.webkitCompassAccuracy;
}
if (window.DeviceOrientationEvent) {
window.addEventListener("deviceorientation", orientationHandler, false);
} else {
document.body.innerHTML = "What user agent u r using???";
}
</script>
</body>
</html>
参数说明:
alpha:
在围绕 z
轴旋转时(即左右旋转时),y
轴的度数差。
beta
: 在围绕x
轴旋转时(即前后旋转时),z
轴的度数差。
gamma
: 在围绕y
轴旋转时(即扭转设备时),z
轴的度数差。
webkitCompassHeading: 与正北方向的角度差值。正北为0度,正东为90度,正南为180度,正西为270度。因为0度是正北,所以叫指北针,不是指南针。
webkitCompassAccuracy: 指北针的精确度,表示偏差为正负多少度。一般是10。