如何在HTML5中通过Magnetometer获取地磁强度并开发一个网页版磁力计-H5教程-PHP中文网

html5通过generic sensor api支持magnetometer传感器，需设备硬件支持、用户授权运动传感器权限及安全上下文（https/localhost）；chrome 63+、edge 79+支持，firefox暂未实现，ios safari不支持。

如何在html5中通过magnetometer获取地磁强度并开发一个网页版磁力计

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，随地理位置变化）。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

处理权限与降级方案

首次使用需请求传感器权限（类似地理位置）：

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 并允许运动传感器”。