獲取移動設備的陀螺儀，需要知道陀螺儀包含什么。
我們可以讓document監聽deviceorientation 來獲取相關的數據，里面包括3個值 alpha、beta和gamma。
這三個值分別代表：
（1）alpha：
移動設備水平放置時，繞z軸旋轉的角度，數值為0度到360度。
（2）beta：
移動設備水平放置時，繞X軸旋轉的角度，數值為-180度到180度。
（3）gamma：
移動設備水平放置時，繞Y軸旋轉的角度，數值為-90度到90度。
案例：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
alpha:<span id="alpha"></span><br/>
beta:<span id="beta"></span><br/>
gamma:<span id="gamma"></span><br/>
</body>
<script>
if (window.DeviceOrientationEvent) {
window.addEventListener('deviceorientation', function (event) {
var a = document.getElementById('alpha'),
b = document.getElementById('beta'),
g = document.getElementById('gamma'),
alpha = event.alpha,
beta = event.beta,
gamma = event.gamma;
a.innerHTML = Math.round(alpha);
b.innerHTML = Math.round(beta);
g.innerHTML = Math.round(gamma);
}, false);
} else {
document.querySelector('body').innerHTML = '你的瀏覽器不支持陀螺儀';
}
</script>
</html>
效果：
兼容：
兼容具體沒有測試，ios和android兩家的系統有一些區別，而且不同的內核也有一定的偏差。
判斷是否是ios可以使用一個webkitCompassHeading屬性來判斷，ios上面會有這個屬性，來表示 手機與地球正北方的夾角。
如果dom里面含有這個屬性，我們就需要通過這個屬性進行加減來計算出來當前所處於的地區的水平位置。
--------------------- 本文來自 專注前端30年 的CSDN 博客 ，全文地址請點擊：https://blog.csdn.net/qq_30100043/article/details/73323617?utm_source=copy