HTML5通过Generic Sensor API支持Magnetometer传感器，需设备硬件支持、用户授权运动传感器权限及安全上下文（HTTPS/localhost）；Chrome 63+、Edge 79+支持，Firefox暂未实现，iOS Safari不支持。
HTML5 本身不直接提供 Magnetometer 接口来读取地磁强度，但现代浏览器（Chrome、Edge、Firefox 部分版本）已通过 Generic Sensor API 支持 Magnetometer 传感器，前提是设备硬件支持（如手机、部分笔记本）且用户授权了运动传感器权限。
确认浏览器与设备支持
并非所有浏览器或设备都启用该功能：
- Chrome 63+（Android/iOS需启用
chrome://flags/#enable-generic-sensor，桌面版需 HTTPS + 本地服务器） - Edge 79+ 支持（需 HTTPS）
- Firefox 暂未实现
Magnetometer（截至2024年仍处于实验阶段） - iOS Safari 不支持（无 Generic Sensor API）
- 必须在安全上下文（HTTPS 或
localhost）中运行，否则会静默失败
基础代码：监听地磁数据
以下是一个最小可行的网页磁力计示例（需部署在 HTTPS 或 localhost）：
<script>
if ('Magnetometer' in window) {
const mag = new Magnetometer({ frequency: 60 });
mag.onreading = () => {
// 单位：微特斯拉（µT）
const x = mag.x.toFixed(2);
const y = mag.y.toFixed(2);
const z = mag.z.toFixed(2);
const magnitude = Math.sqrt(x*x + y*y + z*z).toFixed(2);
console.log(`X: ${x} µT, Y: ${y} µT, Z: ${z} µT → |B| ≈ ${magnitude} µT`);
document.getElementById('mag-readout').textContent =
`|B| = ${magnitude} µT (X:${x}, Y:${y}, Z:${z})`;
};
mag.onerror = (event) => {
console.error('磁力计不可用:', event.error);
};
mag.start();
} else {
console.warn('当前浏览器不支持 Magnetometer API');
}
</script>
注意：mag.x/mag.y/mag.z 是设备坐标系下的三轴磁场分量（单位 µT），其绝对值反映地磁总强度（典型值约 25–65 µT，随地理位置变化）。
立即学习“前端免费学习笔记（深入）”；
处理权限与降级方案
首次使用需请求传感器权限（类似地理位置）：
if ('permissions' in navigator) {
navigator.permissions.query({ name: 'accelerometer' }) // 注意：Magnetometer 权限常归类为 'accelerometer' 或 'motion'，实际以 UA 实现为准
.then(result => {
if (result.state === 'granted') {
startMagnetometer();
} else if (result.state === 'prompt') {
// 用户将看到权限提示（仅在用户交互后触发）
button.addEventListener('click', startMagnetometer);
}
});
}
更可靠的做法是：在用户点击按钮后初始化传感器（避免静默拒绝）。若失败，可提示“请在支持的设备上使用 Chrome/Edge 并允许运动传感器”。
实用建议与注意事项
- 校准很重要：手机内置磁力计易受扬声器、金属外壳干扰，读数可能漂移。提醒用户做“8字校准”（多数 Android 系统设置中提供）
- 区分地磁与干扰场：静态环境下的稳定读数才接近真实地磁场；靠近电脑、充电器时数值会显著升高
- 不要依赖绝对精度：网页端无法访问原始校准参数，仅适合定性测量（如检测磁铁靠近、方向变化）
-
替代方案：若
Magnetometer不可用，可尝试结合DeviceOrientation+ 已知地磁偏角估算方向，但无法获取强度
不复杂但容易忽略：确保页面有明确用户交互触发（如“开始检测”按钮），并始终检查 mag.reading 是否为有效数字（避免 NaN 或初始 0 值误判）。
