这是
实验性技术
检查
浏览器兼容性表格
要小心谨慎在生产中使用这之前。
环境光事件 give a web application access to a device's ambient light sensor to detect changes in light intensity.
When the light sensor of the device detects a change in light intensity, the browser is notified of the change and fires a
DeviceLightEvent
event. The event gives information about the light intensity of the device's environment.
DeviceLightEvent
provides a value attribute with light intensity in
lux
which is generally treated as shown below.
10 ~ 50 lux : Dim Environment
100 ~ 1000 lux : Normal
> 10000 lux : Bright
It uses the
addEventListener
method of the
window
对象。
window.addEventListener("devicelight", function (event) {
// Read out the lux value
var luminosity = event.value;
alert(luminosity);
});
window.addEventListener('devicelight', function(event) {
var bodyBg= document.body.style;
//event.value is the lux value returned by the sensor on the device
if (event.value < 100) {
alert('Hey, you! You are working in a dark environment');
bodyBg.backgroundColor="lightgrey";
} else {
bodyBg.backgroundColor="#fff";
}
});
This example shows how the API can actually be used in the wild. If your app contains a lot of white in the UI, it is usually beneficial to the user to change the UI to a darker color in a darker environment. The code alerts the user that they are working in a dark environment and then changes the page's background to a darker color.
| 规范 | 状态 | 注释 |
|---|---|---|
|
Ambient Light Sensor
The definition of 'Ambient Light Events' in that specification. |
候选推荐 | Initial specification |
| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
DeviceLightEvent
非标
|
Chrome No | Edge ≤18 — 79 |
Firefox
62
Disabled
|
IE No | Opera No | Safari No | WebView Android No | Chrome Android No |
Firefox Android
62
Disabled
|
Opera Android No | Safari iOS No | Samsung Internet Android No |
value
非标
|
Chrome No | Edge 13 — 79 |
Firefox
62
Disabled
|
IE No | Opera No | Safari No | WebView Android No | Chrome Android No |
Firefox Android
62
Disabled
|
Opera Android No | Safari iOS No | Samsung Internet Android No |
完整支持
不支持
实验。期望将来行为有所改变。
非标。预期跨浏览器支持较差。
见实现注意事项。
用户必须明确启用此特征。
DeviceLightEvent