AmbientLightSensor 不可靠因其已被主流浏览器弃用：Chrome 91+ 删除、Firefox 从未支持、Safari 明确拒绝，主因隐私风险、硬件缺失及系统限制；推荐用 prefers-color-scheme 媒体查询结合 CSS 变量动态调节对比度。
目前无法直接用 AmbientLightSensor 自动调节字体对比度，因为该传感器在主流浏览器中支持极差——Chrome 67+ 曾短暂支持，但自 Chrome 91 起已完全移除；Firefox、Safari 均未实现。它不属于稳定可用的 Web API。
为什么 AmbientLightSensor 不可靠
该接口是早期实验性特性，设计初衷是为 PWA 提供环境光数据，但因隐私顾虑（可能被用于指纹识别）、硬件适配困难（多数 PC/笔记本无环境光传感器）、移动端系统级限制（iOS 完全不开放）等原因，已被主流引擎弃用：
- Chrome：67–90 版本支持，91+ 彻底删除（Chromium Issue #1188021）
- Firefox：从未实现
- Safari：无计划支持，WebKit 官方明确拒绝
- 当前 MDN 文档已标注为“非标准，不推荐使用”
更可行的替代方案：用 prefers-color-scheme + 系统亮度
虽然拿不到精确 lux 值，但可通过用户系统偏好与设备能力间接响应光照环境：
-
CSS 媒体查询：
@media (prefers-color-scheme: dark)匹配系统深色模式（通常在弱光下启用） -
JavaScript 检测：
window.matchMedia('(prefers-color-scheme: dark)').matches动态切换文本/背景色 -
补充逻辑：结合
navigator.deviceMemory或screen.orientation避免低端设备过度渲染
进阶：用 CSS 自定义属性 + 渐变对比度
不依赖传感器，也能实现“随环境柔顺变化”的视觉效果：
立即学习“前端免费学习笔记（深入）”；
- 定义基础变量：
:root { --text-base: #333; --bg-base: #fff; --contrast-ratio: 1; } - 在深色模式中提升对比度：
@media (prefers-color-scheme: dark) { :root { --text-base: #e0e0e0; --bg-base: #121212; } } - 用
color-contrast()（实验性，仅 Safari 技术预览支持）或min()/max()函数动态计算安全文本色 - 关键技巧：对正文使用
color: var(--text-base); background: var(--bg-base);，让样式层统一响应
若真需物理光感：走原生桥接路线
网页本身做不到，但可在特定场景绕过限制：
- Electron / Tauri 桌面应用：调用 Node.js 或系统 API（如 Windows WMI、macOS IOKit）读取环境光传感器
-
Capacitor / Cordova 移动端：通过插件（如
cordova-plugin-ambient-light）访问 Android/iOS 原生传感器 - PWA + WebUSB（极少数设备）：连接外置光敏电阻模块，需用户手动授权，体验割裂
