deviceorientation事件用来监听设备的方向
设备在三维空间中是靠x、y和z轴来定位的。当设备静止放在水平表面上时，这三个值都是0
x轴方向是从左往右，y轴方向是从下往上，z轴方向是从后往前
触发deviceorientation事件时，事件对象中包含着每个轴相对于设备静止状态下发生变化的信息，事件对象包含以下5个属性
alpha:在围绕z轴旋转时（即左右旋转时),y轴的度数差；是一个介于0到360之间的浮点数
beta:在围绕x轴旋转时（即前后旋转时）,z轴的度数差；是一个介于-180到180之间的浮点数
gamma:在围绕y轴旋转时（即扭转设备时)，z轴的度数差；是一个介于-90到90之间的浮点数
absolute:布尔值，表示设备是否返回—个绝对值
compassCalibrated:布尔值，表示设备的指南针是否校准过
手机放置在水平桌面上，android的alpha、beta、gamma值为90、0、0；IOS的alpha、beta、gamma值为0、0、0
测试代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#tt{
width: 100px;
line-height: 100px;
height: 100px;
background: pink;
margin: 30px auto 0;
text-align: center;
}
</style>
</head>
<body>
<div id="tt"></div>
</body>
<script type="text/javascript">
let oBox = document.getElementById('box');
window.addEventListener('deviceorientation',(e)=>{
oBox.innerHTML = Math.round(e.beta)
oBox.style.transform = `rotate(${e.beta}deg)`
})
</script>
</html>
原文链接：https://www.qiquanji.com/post/7922.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知