В последнее время появляется все больше и больше мобильных устройств, которые уже не только определяют освещенность вокруг, но и соответствующим образом меняют отображаемую на экране информацию к более удобному и читаемому виду.
Теперь эта возможность потихоньку перебирается и в движки мобильных браузеров.
В статье будет рассмотрен пример реагирования веб-старницы в браузере на окружающую освещенность.
Ambient Light Events API
Для реализации реагирования страницы на освещенность мы будем использовать Ambient Light Events. Это часть HTML5 Device APIs, который позволяет взаимодействовать с сервисами устройств. Ambient Light Events дают доступ к световому сенсору используя JavaScript.
События освещенности
Браузер вызывает событие DeviceLight когда сенсор обнаруживает изменение уровня освещенности. Его мы и будем отлавливать. В событии браузер передает и уровень освещенности переданный от сенсора.
window.addEventListener('devicelight', function(event) {
console.log(event.value + 'lux');
});
Теперь при изменении освещенности в консоль будет попадать информация о текущем уровне.
Учим страницу реагировать на свет
Для демонстрации возможностей будем использовать три стиля страницы, которая будет заменяться на нужную в зависимости от освещенности:
- при средней освещенности — серый фон, темный текст (стандартное отображение страницы, при отсуствии информации об освещенности)
- при большой освещенности — белый фон, темный текст
- при малой освещенности — темный фон, светлый текст
Напишем необходимый JavaScript код:
window.addEventListener('devicelight', function(e) {
var lux = e.value;
if(lux < 50) {
document.body.className = 'dark';
}
if(lux >= 50 && lux <= 300) {
document.body.className = 'normal';
}
if(lux > 300) {
document.body.className = 'bright';
}
});
И соответствующие ему стили для страницы:
body,
body.normal {
background-color: #ddd;
color: #111;
}
body.dark{
background-color: #444;
color: #fff;
}
body.bright {
background-color: #fff;
color: #333;
}
Посмотреть ДЕМО
На данный момент, увы, эта возможность поддерживается лишь в Firefox 22+, так же должен быть датчик освещенности у устройства.
Тестирование страницы проводилось в Firefox на устройствах Lenovo P780, Nexus 5, Nexus 7.
Страница немного по-разному ведет себя на этих устройствах, видимо, из-за разной чувствительности сенсоров.
W3C обещали добавить определения освещенности в CSS Media Queries 4 через параметр luminosity, т.е. приведенный выше пример имел бы следующий вид:
@media screen and (luminosity: normal) {
body {background-color: #ddd; color: #111;}
}
@media screen and (luminosity: dim) {
body {background-color: #444; color: #fff;}
}
@media screen and (luminosity: washed) {
body {background-color: #fff; color: #333;}
}
Но на данный момент документ все еще находися на стадии черновиков. Будем ждать официального объявления поддержки данной возможности.
UPD: По просьбе пользователя ange007 добавил на страницу трекбар, для удобного просмотра примера без поддерживаемого устройства. Так же добавил QR код для быстрого просмотра на мобильных устройствах.
