手机移动网络 api_移动网络超级大国–环境光API

最新推荐文章于 2024-09-13 17:25:49 发布

dingshi7798

最新推荐文章于 2024-09-13 17:25:49 发布

阅读量200

点赞数

文章标签：网络 java python css javascript ViewUI

原文链接：https://www.sitepoint.com/mobile-web-superpowers-ambient-light-api/

版权

手机移动网络 api

网络已经成为一个虚拟环境，带来了各种各样的体验。如果有人想在野餐时讨论本·阿弗莱克（Ben Affleck）在其智能手机上扮演蝙蝠侠的最新令人沮丧的言论，则请他们讨论新的蝙蝠侠电影。他们可以按照自己的意愿阅读尽可能多的评论。我们生活在一个这样的时代：作为开发人员，我们可以为公众提供补充其日常生活和随意兴趣的资源，知识和经验。借助新的设备API和传感器，我们开始看到可能使我们能够响应其环境，位置和设备状态的可能性。

设备API的世界发生了很多事情。对于像我这样热切的开发人员，这是一个激动人心的机会，可以开始探索我们如何使用这些即将到来的API来改善网站/ Web应用程序的访问者的体验。

他们是否在黑暗的房间里，当他们访问我们新的“哥谭”电视节目迷时，不希望明亮的白色背景燃烧视网膜吗？

他们是否可能在上述野餐中苦苦挣扎-在正午的阳光下at着我们的文字？

他们的手机电池是否即将用完，是否有可能在阅读最新的蝙蝠侠粉丝小说时不想播放哥谭城市天际线的流媒体视频背景？

在本系列文章中，我将介绍诸如此类的各种API，以及每个示例的演示和潜在用途。希望它将为即将到来的项目震动一些您自己的想法！

我们将从W3C Ambient Light API开始，它将使我们能够响应设备周围的光照水平。

Ambient Light API的基础

环境光API为开发人员提供了一种感知设备周围光强度的方法。它以勒克斯（光强度的国际度量单位）测量设备周围的光。 MDN关于使用光传感器的文章很好地概述了这些勒克斯值范围代表的含义：

10〜50 lux：昏暗的环境

100〜1000 lux：正常

10000 lux：明亮

我建议您为每个实现对这些值进行一些反复试验。我在下面的演示中的亮度触发点略有不同。

浏览器兼容性

Ambient Light API仍处于早期阶段。在撰写本文时，仅Mac OS X上的Firefox 22和Android版的Firefox支持。希望很快会得到进一步的支持，但是这种支持会逐渐降低–如果设备或浏览器不支持API，则将其忽略，并且我们将继续存在下去！对于使用受支持的浏览器的用户，我们将为他们提供更好的体验。

在JavaScript中使用这些值

要读取设备周围的光强度，请将事件侦听器添加到侦听名为devicelight的事件的window对象。此示例将以勒克斯为单位的值返回到console.log ：

window.addEventListener("devicelight", function (event) {
  var luminosity = event.value;
  console.log(luminosity);
});

在Mac OSX的Firefox上返回以下代码：
Firefox控制台

我们可以将此环境光API用于什么？

考虑一下这里的可能性，您可以进入响应式设计的全新领域。您不仅可以响应用户的视口大小和设备，还可以响应他们的环境是非常明亮还是非常暗，然后进行相应调整。

现在是演示时间！

为了展示该API的潜力，我们将从构建一个简单的一页网站开始，其中包含一些文本和一个svg图像。通过更改body标签上的类名，我们将能够操纵它们的外观。

我们将从一个非常基本的响应页面开始，没有任何Ambient Light API实现。该页面的一小段显示如下。有关完整的开始标记，请参见此Codepen 。

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <title>Ambient Light demo - Text changes</title>
  <style type="text/css">
    body {
      font-family: "Trebuchet MS", sans-serif;
      font-size: 16px;
      padding: 0 50px;
    }
    h1 {
      text-align: center;
    }

    @media all and (max-width: 960px) {
      body {
        padding: 0 25px;
      }
      svg {
        clear: both;
        display: block;
        float: none;
        margin: 0 auto;
        width: 80%;
      }
    }
  </style>
</head>
<body>
  <h1>The Gentlemen's Book of Etiquette and Manual of Politeness</h1>
  <svg><!-- our svg element here --></svg>
  <p>Man was not intended to live like a bear or a hermit, apart from others of his own nature, and, philosophy and reason will each agree with me, that man was born for sociability and finds his true delight in society. Society is a word capable...</p>
  ...
</body>
</html>

我们将通过添加在devicelight事件中读取并更改我们的类名称JavaScript来引入Ambient Light API调用标签取决于其接收的亮度值：

<script>
window.addEventListener("devicelight", function (event) {
    var luminosity = event.value;

    if (luminosity <= 5) {
      document.body.className = "darkness";
    } else if (luminosity <= 50) {
      document.body.className = "dim";
    } else if (luminosity <= 1000) {
      document.body.className = "bright";
    } else if (luminosity > 1000) {
      document.body.className = "ahhhmyeyes";
    }
  });
</script>

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

~~原价$ 11.95~~ 您的完全免费

如果光线真的很暗，则我们的设备似乎处于几乎漆黑的黑暗中（可能是在晚上，或者它们处于黑暗的小巷中，即将阻止夜店抢劫珠宝）。对于这些设备，我们将背景色设置为深紫色，使文本和SVG图像的颜色变亮：

.darkness {
  background-color: #2d004f;
  color: #b5aaff;
}
.darkness svg path {
  stroke: #b5aaff;
  fill: #b5aaff;
}

在周围有一点光线的黑暗情况下，我们将背景变淡了一点紫色，也使文本变亮了：

.dim {
  background-color: #6600b4;
  color: #b5aaff;
}
.dim svg path {
  stroke: #c8c3ff;
  fill: #c8c3ff;
}

我们平均光线范围的颜色将是相对平静的紫色和深色文本。对于不支持该API的任何设备或该API尚未启动的时间，我还在我的body CSS定义中添加了相同的颜色。因此，这将是我们的默认样式集：

.average {
  background-color: #ab49f6;
  color: #333;
}
.average svg path {
  stroke: #333;
  fill: #333;
}

您可以通过同时定义body样式和.average样式，在一处定义所有这些样式。否则，您无法为.average设置任何样式，以使其恢复为body默认样式。这是个人喜好。在生产站点上，为了保持内容整洁和易于理解，我很想使用最后一个选项，而根本不定义.average 。对于示例，我已经对其进行了定义，以使所有浏览这些示例的人都可以清楚地看到它。

当它开始变亮时，我们将背景设为白色，并将文本和图像设置为黑色。我们还增加了字体大小，以使其更易于阅读：

.bright {
  background-color: #fff;
  color: #000;
  font-size: 20px;
}
.bright svg path {
  stroke: #000;
  fill: #000;
}

如果我们达到了非常明亮的亮度，我们将使用与.bright类相同的样式，但是我们将字体大小增加一些：

.ahhhmyeyes {
  background-color: #fff;
  color: #000;
  font-size: 22px;
}
.ahhhmyeyes svg path {
  stroke: #000;
  fill: #000;
}

在行动

实际上，在进行测试时，确实有3种照明水平非常突出，因此我在下面提供了这些示例。

在相对平均的光线下（下图是坐在火车上拍摄的）：

平均照明

在户外非常明亮的条件下，我们的页面更易于阅读：

明亮的照明

在非常黑暗的条件下，页面会变暗，因此我们不会用明亮的光线蒙蔽用户：

黑暗的灯光

平稳过渡

为确保颜色平滑变化并避免样式突然变化，我们在body标签的样式中添加了CSS过渡。通过列出要更改的特定属性，可以以更有效的方式完成此操作。为了简单起见，在此示例中，我坚持使用all ：

-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;

过渡还有助于使您明确没有将用户移至其他网站。从黑白设计到有色设计的突然变化可能会使用户感到困惑。我发现CSS过渡可以稍微缓解这种混乱。

在此Codepen中可以看到我们启用了 Ambient Light API的页面

精妙的YouTube电影院

您知道电影院灯火通明宣布电影开始的那欢乐时刻吗？我认为，用精美的红色窗帘打造自己的YouTube电影院将是一个有趣的演示想法。当您关闭自己的房间的灯光来观看视频时，电影院也会调暗自己的灯光。

在第二个演示中，我们上面的许多概念仍然非常相似。我们没有使用body元素，而是使用了一个名为.lights-off的新元素.lights-off该元素用作视频后面的固定黑色封面。

<div class="lights-off"></div>
<h1>YouTube Cinema</h1>
<div class="youtube-video">
  <iframe width="640" height="360" src="//www.youtube.com/embed/3wyXaAXajhc" frameborder="0" allowfullscreen></iframe>
</div>

它开始时是完全透明的，所以我们的漂亮窗帘可以透过：

.lights-off {
  background-color: #000;
  height: 100%;
  left: 0;
  opacity: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: -1;

  -webkit-transition: opacity 0.5s ease-in-out;
  -moz-transition: opacity 0.5s ease-in-out;
  -o-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
}

然后，我应用一类.darkness ，将.lights-off元素的不透明度增加到70％。这具有使灯光变暗的效果：

.darkness .lights-off {
  opacity: 0.7;
}

我们的JS也变得更短：

window.addEventListener("devicelight", function (event) {
  var luminosity = event.value;

  if (luminosity <= 5) {
    document.body.className = "darkness";
  } else {
    document.body.className = "";
  }
});