ambientlightsensor 在大多数网页中无法运行，因其是实验性 api，仅部分 android 浏览器有限支持，需手动开启标志、https 环境、系统权限，且常因底层缺失报 notsupportederror；可靠替代方案是使用 window.matchmedia 监听 prefers-color-scheme 等系统偏好。
HTML 本身无法直接读取环境光传感器数据——浏览器不提供 navigator.ambientLightSensor 这类标准 API，所谓“HTML 做环境光适配”实际依赖 JavaScript 调用底层传感器接口，且目前仅在部分 Android Chrome（v69+）和 Samsung Internet 浏览器中有限支持，iOS Safari 完全不支持。
为什么 AmbientLightSensor 在大多数网页里根本跑不起来
这是一个被严重误传的“Web API”。真实情况是：
-
AmbientLightSensor是Sensor APIs的一部分，属于Experimental特性，需手动开启 Chrome 标志（chrome://flags/#sensor-api），生产环境默认禁用 - 必须运行在
https或localhost下，HTTP 页面直接抛SecurityError - 需要用户授予权限，但浏览器不提供标准的
requestPermission方法，实际依赖系统级权限弹窗（且常被静默拒绝） - 即便启用，
new AmbientLightSensor()在多数设备上会立即报NotSupportedError—— 芯片驱动、HAL 层、WebView 实现缺一不可
替代方案：用 window.matchMedia 检测系统级暗色模式（最可靠）
真正落地可用的“亮度适配”，不是靠传感器读数，而是监听系统偏好。iOS/Android/macOS/Windows 都支持 (prefers-color-scheme: dark)，部分 Android 还支持 (prefers-reduced-transparency) 或厂商扩展如 (dynamic-range: high)：
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
function handleColorSchemeChange(e) {
document.documentElement.classList.toggle('dark', e.matches);
}
mediaQuery.addEventListener('change', handleColorSchemeChange);
handleColorSchemeChange(mediaQuery); // 初始化
注意：matchMedia 不反映实时光照强度，但它稳定、跨平台、无需权限，是当前唯一可交付的“环境感知”手段。
如果真要读原始照度值：只能走 Native + WebView 桥接
纯 Web 方案已证实不可行。可行路径只有一条：由原生 App 提供传感器数据，通过 JSBridge 注入到网页上下文：
- Android：在
WebView中重写addJavascriptInterface，暴露getAmbientLux()方法，返回 float 值 - iOS：用
WKScriptMessageHandler监听getAmbientLight消息，调用AVCaptureDevice的exposureTargetOffset间接估算（无直接 API） - 网页侧统一监听
postMessage或全局函数回调，例如：window.onAmbientLightUpdate = (lux) => { ... }
这个方案绕开了浏览器限制，但代价是失去 PWA 独立部署能力，必须依附于宿主 App。
别在 AmbientLightSensor 上浪费调试时间——它在 95% 的用户设备上不会触发 reading 事件。真正该花时间的是设计响应式亮度逻辑：比如根据 prefers-color-scheme 切换 CSS 变量，再配合 reduce-motion 和 contrast 媒体查询做渐进增强。传感器数据就算拿到，也得自己定义“多亮算亮”“多暗算暗”，而系统偏好已经替你做了这层语义映射。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
