移动端设备方向deviceorientation事件
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,我们将及时处理。
微信扫码关注
更新实时通知