手機搖一搖 DeviceOrientationEvent
阿新 • • 發佈：2018-12-23
參考：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。