现代浏览器对敏感数据的访问越来越多地实施了限制，设备方向和运动传感器（如陀螺仪）属于敏感信息，因为它们可以透露用户设备的物理动作和朝向，所以需要在HTTPS环境下才能正确返回数据。
定位一：环境不对由于现代浏览器的安全要求，许多设备传感器 API（包括陀螺仪）只能在安全的上下文中使用，这通常意味着页面必须通过 HTTPS 提供服务。当使用 HTTP 访问网站时，浏览器会阻止对陀螺仪 API 的访问。
解法： 使用 ngrok 提供临时的 HTTPS 隧道：
ngrok 是一个服务，它允许你将本地服务器暴露到公共互联网上的一个安全隧道。这可以用来快速地将 HTTP 服务器转换为可通过 HTTPS 访问的服务。这个方法可以帮助你在开发阶段绕过 HTTPS 校验，允许你在手机上测试陀螺仪特性。
- 进 ngrok 官网，注册个账号，用免费服务；
- 安装 ngrok：brew install ngrok/ngrok/ngrok
- 配置你的 authtoken：ngrok config add-authtoken xxxx(你的token)
- 运行 ngrok 以将本地端口 3000 转发到公共 HTTPS 地址：ngrok http 3000
- ngrok 会提供一个 HTTPS URL，如下图红色块就是你手机要访问的内容
- iOS13 ，需要用户主动唤起的授权，用户手动同意之后才能拿到陀螺仪的值（页面加载结束后，非主动请求不会唤起授权弹窗）
- 我后续又测试了安卓机型，不用授权直接就有数据（令人感慨，自由与风险往往并存）
解法： 兼容各种环境与情况，需要鉴权就发起请求
function testSupportGyro() {
return new Promise(() => {
if (
typeof DeviceOrientationEvent !== "undefined" &&
typeof DeviceOrientationEvent.requestPermission === "function"
) {
// iOS 13 设备需鉴权
DeviceOrientationEvent.requestPermission()
.then((permissionState) => {
// 如果用户同意，就可以监听陀螺仪数据
if (permissionState === "granted") {
window.addEventListener(
"deviceorientation",
handleOrientationEvent
);
} else {
// 用户不同意，无法使用陀螺仪
console.error("设备不支持访问陀螺仪");
}
})
.catch((error) => {
console.error(error);
});
} else {
// 安卓机型不需鉴权，直接监听
window.addEventListener("deviceorientation", handleOrientationEvent);
}
});
}
,作者：狂炫冰美式
链接：https://juejin.cn/post/7326985988768743461
