环境光事件

这是 实验性技术
检查 浏览器兼容性表格 在生产中使用这之前。

The ambient light events are a handy way to make a web page or an application aware of any change in the light intensity. It allows them to react to such a change, for example by changing the color contrast of the User Interface (UI) or by changing the exposure necessary to take a picture.

光事件

When the light sensor of a device detects a change in the light level, it notifies the browser of that change. When the browser gets such a notification, it fires a DeviceLightEvent event that provides information about the exact light intensity (in lux units).

此事件可以被捕获在 window 对象级别通过使用 addEventListener 方法 (使用 devicelight 事件名称) 或通过把事件处理程序附加到 window.ondevicelight 特性。

Once captured, the event object gives access to the light intensity expressed in lux through the DeviceLightEvent.value 特性。

范例

if ('ondevicelight' in window) {
  window.addEventListener('devicelight', function(event) {
    var body = document.querySelector('body');
    if (event.value < 50) {
      body.classList.add('darklight');
      body.classList.remove('brightlight');
    } else {
      body.classList.add('brightlight');
      body.classList.remove('darklight');
    }
  });
} else {
  console.log('devicelight event not supported');
}
					

规范

规范 状态 Comment
Ambient Light Sensor
The definition of 'Ambient Light Events' in that specification.
候选推荐 初始定义

浏览器兼容性

更新 GitHub 上的兼容性数据
Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
DeviceLightEvent
非标
Chrome No Edge ≤18 — 79 Firefox 62
Disabled
62
Disabled
bug 1462308 .
Disabled From version 62: this feature is behind the device.sensors.ambientLight.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
不支持 22 — 61
Not supported for MacBook with Touch Bar and Windows 7 (see bug 754199 ).
IE No Opera No Safari No WebView Android No Chrome Android No Firefox Android 62
Disabled
62
Disabled
bug 1462308 .
Disabled From version 62: this feature is behind the device.sensors.ambientLight.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
不支持 15 — 61
Opera Android No Safari iOS No Samsung Internet Android No
value
非标
Chrome No Edge 13 — 79 Firefox 62
Disabled
62
Disabled
bug 1462308 .
Disabled From version 62: this feature is behind the device.sensors.ambientLight.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
不支持 22 — 61
Not supported for MacBook with Touch Bar and Windows 7 (see bug 754199 ).
IE No Opera No Safari No WebView Android No Chrome Android No Firefox Android 62
Disabled
62
Disabled
bug 1462308 .
Disabled From version 62: this feature is behind the device.sensors.ambientLight.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
不支持 15 — 61
Opera Android No Safari iOS No Samsung Internet Android No

图例

完整支持
完整支持
不支持
不支持
实验。期望将来行为有所改变。
实验。期望将来行为有所改变。
非标。预期跨浏览器支持较差。
非标。预期跨浏览器支持较差。
见实现注意事项。
用户必须明确启用此特征。
用户必须明确启用此特征。

另请参阅