Отзывчивый дизайн. Реакция на уровень освещенности

В последнее время появляется все больше и больше мобильных устройств, которые уже не только определяют освещенность вокруг, но и соответствующим образом меняют отображаемую на экране информацию к более удобному и читаемому виду.

Теперь эта возможность потихоньку перебирается и в движки мобильных браузеров.

В статье будет рассмотрен пример реагирования веб-старницы в браузере на окружающую освещенность.

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;} } 

Но на данный момент документ все еще находися на стадии черновиков. Будем ждать официального объявления поддержки данной возможности.