手机摇一摇 DeviceOrientationEvent

最新推荐文章于 2024-03-25 09:16:09 发布

hdchangchang

最新推荐文章于 2024-03-25 09:16:09 发布

阅读量623

点赞数

本文链接：https://blog.csdn.net/hdchangchang/article/details/40786805

版权

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