手机已授予陀螺仪传感器权限，但浏览器调用Gyroscope提示不支持怎么办

你遇到的是Gyroscope构造函数未被浏览器全局暴露导致的ReferenceError，排除浏览器本身不支持的情况（你可以正常运行官方测试用例已经确认支持），核心是缺了安全策略相关配置，对应解决方法如下：

1. 配置权限策略响应头 #

Generic Sensor API要求服务端显式返回Permissions-Policy头声明允许使用传感器相关接口，否则浏览器会默认隐藏构造函数。你需要在Vite配置中添加开发服务的响应头配置：

// vite.config.js / vite.config.ts
import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    headers: {
      // 声明允许当前页面使用陀螺仪、加速度计等传感器接口
      'Permissions-Policy': 'gyroscope=(*), accelerometer=(*)'
    }
  }
})

生产环境部署时，也需要在对应的Web服务器（Nginx、Caddy、云服务托管配置等）中添加相同的响应头，否则线上环境依然会报错。

2. 确认访问上下文符合安全要求 #

传感器API仅允许在安全上下文中运行：

• 本地开发仅支持localhost域名访问，或者使用HTTPS协议访问
• 如果你用手机访问本地开发服务的局域网IP（如http://192.168.x.x:5173），需要给Vite开启HTTPS配置：

export default defineConfig({
  server: {
    https: true,
    headers: {
      'Permissions-Policy': 'gyroscope=(*)'
    }
  }
})

开启后通过https://前缀的地址访问，手动信任自签名证书即可正常运行。

3. 兜底兼容方案 #

如果上述配置完成后依然有兼容问题，可以引入Generic Sensor API的polyfill，兼容更多浏览器实现：

1. 安装依赖：npm i @ungap/generic-sensor
2. 在项目入口文件最顶部引入：

import '@ungap/generic-sensor'

该polyfill会基于浏览器原生支持的DeviceOrientationEvent接口模拟标准Sensor API的调用方式，不会影响原有逻辑。

内容的提问来源于stack exchange，提问作者OmniOwl