现代浏览器通过JavaScript支持设备传感器数据采集，1. 使用DeviceOrientation API获取设备方向（alpha、beta、gamma）；2. 通过DeviceMotion API获取加速度和旋转数据；3. 部分浏览器支持AmbientLightSensor获取环境光强度；4. 所有功能需在HTTPS安全上下文中运行，依赖用户授权且存在兼容性差异，使用前应进行特性检测并提供降级方案。
现代浏览器支持通过 JavaScript 访问设备的多种传感器，用于采集方向、运动、光线等数据。这些功能主要基于 Device Orientation 和 Device Motion API，适用于手机、平板等具备传感器的移动设备。
1. 监听设备方向（陀螺仪）
设备方向 API 提供设备在空间中的朝向信息，包括 alpha、beta、gamma 三个角度值。
- alpha： 设备绕 Z 轴旋转的角度（0–360°），表示设备的地理方向
- beta： 设备绕 X 轴旋转的角度（-180°–180°），前后倾斜
- gamma： 设备绕 Y 轴旋转的角度（-90°–90°），左右倾斜
示例代码：
if (window.DeviceOrientationEvent) {
window.addEventListener('deviceorientation', function(e) {
const { alpha, beta, gamma } = e;
console.log(`方向: ${alpha}, 前后: ${beta}, 左右: ${gamma}`);
});
} else {
console.log('当前设备不支持方向传感器');
}
2. 监听设备运动（加速度计）
设备运动 API 提供设备在三维空间中的加速度数据，包含重力影响或排除重力的选项。
立即学习“Java免费学习笔记（深入）”；
- acceleration： 当前加速度（含重力）
- accelerationIncludingGravity： 包含重力的加速度（大多数设备使用此项）
- rotationRate： 角速度（每秒旋转角度）
- interval： 数据更新频率（毫秒）
示例代码：
if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion', function(e) {
const { x, y, z } = e.accelerationIncludingGravity;
const rotation = e.rotationRate;
console.log(`加速度: X=${x}, Y=${y}, Z=${z}`);
if (rotation) {
console.log(`旋转: α=${rotation.alpha}, β=${rotation.beta}, γ=${rotation.gamma}`);
}
});
} else {
console.log('当前设备不支持运动传感器');
}
3. 光线传感器（Ambient Light Sensor）
部分现代浏览器支持 AmbientLightSensor 接口，可获取环境光强度（单位：lux）。
注意：该功能需引入 Sensor APIs，目前仅在部分 Chromium 浏览器中可用（如 Chrome for Android）。
示例代码：
if ('AmbientLightSensor' in window) {
const sensor = new AmbientLightSensor();
sensor.onreading = () => {
console.log(`环境光照: ${sensor.illuminance} lux`);
};
sensor.onerror = (event) => {
console.log(`传感器错误: ${event.error.name}`);
};
sensor.start();
} else {
console.log('环境光传感器不可用');
}
4. 权限与兼容性说明
出于安全和隐私考虑，传感器访问可能需要用户授权，且仅在 HTTPS 环境下生效。
- 必须在安全上下文（HTTPS 或 localhost）中运行
- iOS Safari 对 DeviceMotion 和 DeviceOrientation 支持良好，但部分高级传感器需用户手势触发启用
- Android 上 Chrome 支持较完整，但需用户允许“传感器”权限
- 桌面浏览器通常不支持或返回 undefined
建议在使用前进行特性检测，并提供降级提示。
基本上就这些。
