Pull to refresh

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

CSS *JavaScript *HTML *
Sandbox
Media Queries

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

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

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


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



Посмотреть ДЕМО
image

На данный момент, увы, эта возможность поддерживается лишь в 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 код для быстрого просмотра на мобильных устройствах.
Tags:
Hubs:
Total votes 52: ↑48 and ↓4 +44
Views 26K
Comments Comments 19