讲述meta视口标签和媒体查询相关的内容。
示例代码：
~~~
<meta name="viewport" content="width=device-width, initial-scale=1">
@media screen and (max-width:480px) {
// some style
}
~~~
## 像素（pixel）
* 设备像素：设备屏幕的物理像素。
* CSS像素：为Web开发者创造的，在CSS和JS中使用的一个抽象层。
CSS像素和设备像素的比例取决于屏幕是否高DPI和用户缩放的比例。
## 三个视口
桌面上视口宽度等于浏览器宽度，但在手机上有所不同。
* 布局视口。手机上为了容纳为桌面浏览器设计的网站，默认布局视口宽度远大于屏幕宽度，为了让用户看到网站全貌，它会缩小网站。
* 视觉视口。用户正在看到的网站的区域，与设备屏幕一样宽。
* 理想视口。当网站是为手机准备的时候使用。使用meta声明。早期iPhone理想视口为320*480px。
## 缩放
桌面浏览器的缩放仅改变内容尺寸，不改变布局视口；移动端缩放则整体改变。
> 不要禁止缩放。
~~~
<meta name="viewport" content="user-scalable=no">
~~~
禁止缩放是邪恶的，并且浏览器可以关闭禁止缩放功能。
## 分辨率
物理分辨率：设备每英寸内点数（DPI）。
设备像素比：设备像素个数和理想视口的比（DPR）。
dppx和dpi：每一个像素的点数。JS中的`window.devicePixelRatio`和媒体查询的`device-pixel-ratio`的单位。IE不支持，因此要使用dpi单位：
~~~
if(window.devicePixelRatio) {
// DPR大于等于2时执行
}
@media all and((-webkit-min-device-pixel-ratio:2), (min-resolution:192dpi)) {
// DPR大于等于2时生效
}
~~~
1dppx = 96dpi：一英寸对应CSS中96个像素。
## meta视口
~~~
<meta name="viewport" content="name=value,name=value">
~~~
其中可用的name为：
* width：device-width适用于大多数情况。
* initial-scale：一般设为1，为了兼容应同时设置width=device-width。
* minimum-scale
* maximum-scale
* user-scalable
## 媒体查询
媒体类型：目前只有print被正确实现。一般使用all。
> Web开发者希望区分能力弱和能力强的浏览器，而弱浏览器为了避免探测开始伪装自己。
>
> 过去的浏览器最多可处理WAP和HTML的子集XHTML-MP，它们大都遵循标准并实现handheld，Web开发者为这些类型提供简单的样式。而新的现代移动浏览器出现后，它们支持全部样式、JS，因此宁愿不实现handheld而获得和桌面浏览器一样的待遇。
## JavaScript
媒体查询与JavaScript属性相对应。
* 物理屏幕分辨率：screen.width/height（有兼容问题不建议使用）
* 布局视口：document.documentElement.clientWidth
* 视觉视口：window.innerWidth
* 理想视口：screen.width/height（有兼容问题不建议使用）
* 设备像素比：window.devicePixelRatio
* 屏幕方向：window.orientation
