我认为 我们正在开发的所有 WebAPI 中最有趣的事情之一，就是通过 JavaScript 直接与硬件交互，而且，作为其扩展，还可以与我们周围的环境交互。引入 环境光事件。

环境光 API 的理念是能够检测设备周围的光线水平——尤其是在阳光明媚的户外与昏暗的客厅之间存在巨大差异——并根据光线水平调整用户体验。

一个用例可能是更改页面的 CSS 文件/值，在低光照条件下提供更好的阅读体验，减少背景的强烈白色，然后在明亮的环境光下使用更多/更好的对比度。另一个用例可能是根据可用光线播放特定的音乐。

访问设备光线

使用环境光非常简单。您需要做的是为 devicelight 事件添加一个监听器，然后读取亮度值。

它以勒克斯为单位返回。勒克斯值介于低值和高值之间，但一个很好的参考点是，昏暗的值低于 30 勒克斯，而非常明亮的值则在 10,000 勒克斯以上。

window.addEventListener("devicelight", function (event) {
    // Read out the lux value
    var lux = event.value;
    console.log(lux);

});

Web 浏览器支持

环境光事件目前在 Android 上的 Firefox 中受支持，这意味着手机和平板电脑都支持，并且在 Firefox OS 中也受支持。在 Android 设备上（我测试过的那些），传感器正好位于面向用户的摄像头旁边。

它也是 W3C 工作草案，遵循其他类似事件的类型，例如 devicemotion，因此我们希望很快能看到更多此类事件的实现！

演示

Dmitry Dragilev 和 Tim Wright 最近写了一篇关于 环境光 API 的博文，并提供了这段不错的演示视频。

您也可以直接访问 演示示例，如果您在低光照条件下进行测试，您将听到一点音乐。请记住在受支持的设备/Web 浏览器上进行尝试。