最近、周囲の照明を決定するだけでなく、画面に表示される情報をより便利で読みやすい外観に適切に変更するモバイルデバイスが増えています。
現在、この機能はモバイルブラウザのエンジンに徐々に移行しています。
この記事では、ブラウザー内のWebページが環境光にどのように反応するかの例を検討します。
アンビエントライトイベントAPI
照明に対するページの応答を実装するには、 Ambient Light Eventsを使用します。 これは、デバイスサービスとやり取りできるHTML5 デバイスAPIの一部です。 アンビエントライトイベントは、JavaScriptを使用してライトセンサーにアクセスします。
ライトイベント
センサーが光レベルの変化を検出すると、ブラウザーはDeviceLightイベントを発生させます。 キャッチします。 イベントでは、ブラウザはセンサーから送信された光レベルも送信します。
window.addEventListener('devicelight', function(event) { console.log(event.value + 'lux'); });
これで、ライトが変わると、コンソールは現在のレベルに関する情報を取得します。
光に反応するページを学ぶ。
可能性を示すために、3つのページスタイルを使用します。これらは、照明に応じて目的のスタイルに置き換えられます。
- 中程度の照明-灰色の背景、暗いテキスト（標準ページ表示、照明に関する情報がない場合）
- 高輝度-白い背景、暗いテキスト
- 低照度-暗い背景、明るいテキスト
必要な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以降でのみサポートされています。デバイスには光センサーも必要です。
このページは、Lenovo P780、Nexus 5、Nexus 7デバイス上のFirefoxでテストされました。
これらのデバイスでは、センサーの感度が異なるため、ページの動作が少し異なります。
W3Cは、luminosityパラメーターを使用して、 CSS Media Queries 4に照明の定義を追加することを約束しました。 上記の例の形式は次のとおりです。
@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コードも追加されました。