DeviceMotion API可检测设备加速度与旋转，适用于移动设备的体感游戏、计步器等应用。1. 通过devicemotion事件获取acceleration、rotationRate等数据；2. 可用accelerationIncludingGravity结合滤波分离重力影响；3. 利用加速度控制屏幕元素如小球滚动；4. 需注意HTTPS限制、iOS权限及浏览器兼容性，建议添加降级处理。
HTML5的DeviceMotion API可以用来检测设备的物理运动，比如加速度、旋转等数据。它特别适用于移动设备，可用于开发体感游戏、计步器、倾斜控制等应用。
1. 检测设备加速度和旋转速率
DeviceMotion API通过devicemotion事件提供设备的运动信息。事件对象包含以下几个关键属性：
- acceleration：设备在XYZ轴上的加速度（含重力）
- accelerationIncludingGravity：包含重力加速度的XYZ值
- rotationRate：设备绕各轴的角速度（单位：度/秒）
- interval：数据采集的时间间隔（毫秒）
示例代码：
if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion', function(e) {
var a = e.acceleration;
var r = e.rotationRate;
console.log('X轴加速度:', a.x);
console.log('Y轴加速度:', a.y);
console.log('Z轴加速度:', a.z);
console.log('绕X轴旋转:', r.alpha);
console.log('绕Y轴旋转:', r.beta);
console.log('绕Z轴旋转:', r.gamma);}, false);
} else {
console.log('当前设备不支持DeviceMotion API');
}
2. 处理重力影响
如果想获取用户主动移动产生的加速度（排除重力），可使用accelerationIncludingGravity减去估算的重力分量，或直接使用acceleration（部分浏览器已自动排除重力）。
立即学习“前端免费学习笔记（深入）”；
更精确的做法是结合deviceorientation事件或低通滤波算法分离重力与线性加速度。
3. 实际应用场景：设备倾斜控制
利用rotationRate或加速度数据，可以实现屏幕随设备倾斜而变化的效果。例如控制网页中的小球滚动方向：
window.addEventListener('devicemotion', function(e) {
var ax = e.acceleration.x;
var ay = e.acceleration.y;
var ball = document.getElementById('ball');
var left = parseInt(ball.style.left || 0);
var top = parseInt(ball.style.top || 0);
// 根据加速度调整位置
ball.style.left = (left + ax 2) + 'px';
ball.style.top = (top + ay 2) + 'px';
});
4. 注意事项与兼容性
- 需要在HTTPS环境下运行（部分浏览器要求安全上下文）
- iOS Safari需用户手动启用权限（通过“添加到主屏幕”后使用）
- Android多数现代浏览器支持良好（Chrome、Firefox等）
- 桌面设备通常不支持该API
- 建议添加错误处理和降级方案
基本上就这些。只要监听devicemotion事件并解析返回的数据，就能实现丰富的设备运动交互功能。不复杂但容易忽略权限和兼容问题。
