手机上的环境传感器，一般包括气压传感器、温度传感器、湿度传感器、光传感器、声音传感器和距离传感器等。气压传感器能通过气压测量，判断手机当前位置的海拔高度，能提高 GPS 定位的精度，在三星 Galaxy Nexus 上有配备；温度传感器一方面用来测量气温，判断当前环境是否舒适，一方面也能监测手机内部温度是否异常；而比较普遍的是光传感器和距离传感器，对智能手机来说几乎是标配，并且一般设计位于手机正面上方听筒附近位置。

Meta 标签：

这个想必大家都知道，当页面在手机上显示时，增加这个 meta 可以让页面强制让文档的宽度与设备的宽度保持 1:1，并且文档最大的宽度比例是 1.0，且不允许用户点击屏幕放大浏览。

对于传统的页面模型来说，数据的拉取+渲染模型如下：

在页面的 head 部分，使用 jsonp 预拉取 cgi 资源，然后在资源加载完成之后，检查预拉取的数据是否已经返回，如果已返回，则直接用该数据渲染（避免了先用缓存数据渲染再用 cgi 数据渲染导致的二次刷新），否则才用缓存数据渲染。

     flexbox 是一个新的盒子模型，当你给一个元素使用了flexbox模块，那么它的子元素就会指定的方向在水平或者纵向方向排列。这些子元素会按照一定的比例进行扩展或收缩来填补容器的可用空间。flexbox 有许多很好用的地方，下面就着重讲述一下它的一些使用场景：

Example 1： flexbox 等分布局

      如果你要实现以下所示的样式，你可能首先想到的是用 float：

React Native 综述：

在 React Native 中，JavaScript 跟 Object-C 均有一个对应的中间件负责交互，源码中称为 bridge，它们通过 callback 的形式进行传参，通过参数配置来触发 OC 的控件，从而达到以 JavaScript 来控制 Native 的目的。

React Native 的设计理念：既拥有 Native 的用户体验、又保留 React 的开发效率。

React Native 的口号：Learn Once,Write Anywhere.

目前非常流行自适应设计与响应式设计，而且经常让人混淆，自适应设计不应与自适应布局混为一谈，它们是完全不一样的概念。

在这先说明下这两者的异同：

自从移动终端飞速发展以来，各种各样的机型突飞猛进，很多网站的解决方法，是为不同的设备提供不同的网页，比如专门提供一个 mobile 版本，或者 iPhone/iPad 版本。这样做固然保证了效果，但是比较麻烦，同时要维护好几个版本，而且如果一个网站有多个 portal（入口），会大大增加架构设计的复杂度。

于是，很早就有人设想，能不能" 一次设计，普遍适用"，让同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局（layout）？

2010 年，Ethan Marcotte 提出了" 自适应网页设计"（Responsive Web Design）这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。

写在前面

大家阅读此文之前，可以先看一篇 MiloYip 的文章：用 JavaScript 玩转游戏物理 (一) 运动学模拟与粒子系统，看完之后再看此文，更加容易理解。

MiloYip 使用的粒子是 canvas 中绘制的圆，还有一些粒子效果是基于 像素级别的，如：火焰字 ，但是使用像素的计算成本太大，因为需要的粒子数量太多，甚至要配合一些 nosie 算法，如（perlin nosie），计算量太大。

所以一般会先设计好粒子的纹理（每个纹理假设是 32*32，一个粒子就包含了九百多个像素了），这样需要的粒子个数不多，计算量也不大，管理粒子的成本也不高（对粒子增删改查）。

canvas globalCompositeOperation

粒子系统在什么时候最漂亮？晚上！所以在绘制纹理的时候，需要设置 globalCompositeOperation 的值为 lighter。其作用是：在图形重叠的地方，颜色由两种颜色值的加值来决定。

globalCompositeOperation 还有非常多的属性可以设置，详情见：w3school。