手机摇一摇 DeviceOrientationEvent

来源：互联网发布：不亦说乎不亦悦乎编辑：程序博客网时间：2024/06/05 04:08

参考：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。

0 0