新人翻译，欢迎转载~
英文原文地址：http://bitsofco.de/2015/respove-design-viewport/
原文例程地址：https://github.com/ireade/viewports
（可下载例程参照阅读）git
当咱们在作响应式设计时，关注最多的是CSS的@media查询。不能否认，@media查询完成了不少工做，但一个网站的响应能力仍是取决于对Viewport的控制。当咱们想根据屏幕尺寸来自动变化页面布局时，咱们会像这样作：github
@media screen and (min-width: 960px) {
body { background-color: green; }
}
@media screen and (max-width: 960px) and (min-width: 500px) {
body { background-color: pink; }
}
@media screen and (max-width: 500px) {
body { background-color: yellow; }
}
在浏览器上调整窗口大小，能够看到网页的响应能力是乎没有任何问题的。web
那么问题来了
在移动端浏览页面时就出现异常了。浏览器
（没有进行Viewport控制的iPhone6上的显示效果）布局
页面虽然能够看到，但不能自适应手机的屏幕。之因此会有这样的问题，是设备尺寸和Viewport尺寸不一致致使的。为了更好的理解这两个尺寸之间的不一样点，下面就简单说说：测试
- 设备像素：这个是物理层面的像素数量，好比一台iPhone6，是375x667像素。（注：这里所说的设备像素有两种类型，硬件像素和设备独立像素，不过这个区别与此文无关）；
- CSS像素：这个是咱们在CSS使用过程当中的一个抽象的单位，它并无一个绝对的尺寸，页面上单个CSS像素的大小彻底取决于Viewport的大小；
- Viewport：Viewport决定了页面的像素密度。好比一个宽750px的Viewport，表示屏幕上横向排布了750个CSS像素（Viewport在未缩放的状况下）。
Viewport是"无关设备"的，它不知道也不关心咱们的设备到底有多大的屏幕。网站
大多数显示器的Viewport尺寸默认在800px到1024px之间，这就解释了为何以前咱们的例程能够在电脑上正常显示而不用管当前屏幕的尺寸。ui
经过meta标签来控制Viewport
能够设置meta标签中的viewport信息，以解决Viewport尺寸不匹配的问题。meta标签的用法以下：spa
<meta name="viewport" content="key=value, key=value">
标签内容中有6个关键字：scala
- width
- height
- initial-scale
- minimum-scale
- maximum-scale
- user-scalable
WIDTH
能够用width来设置viewport的宽度，以替代那些不合适的默认宽度。咱们能够给其设定一个固定大小，但设定成device-width更加明智一些，这样咱们能够兼容不一样大小的屏幕。
<meta name="viewport" content="width=device-width">
加了这句话以后，咱们的例程看起来就正常多了。
（在iPhone6上设置width=device-width以后的显示效果）
INITIAL-SCALE
在移动设备上，用户有时会须要缩放页面，当页面缩放时，Viewport的像素尺寸也会相应的改变，但CSS尺寸不会变。
好比，在一个400px宽的Viewport中有一个元素，设定
width: 100px;，这时该元素就横跨了1/4的屏幕。若是用户把页面放大到两倍大小，这时Viewport宽度变成了200px，但元素仍然宽100个CSS像素。这时这个元素就占了半个屏幕了。
咱们能够经过initial-scale来设置CSS像素和Viewport像素之间的比例，一般状况下是1:1。这个参数的设置能够很好的解决width=device-width设置所带来的问题。有些移动设备浏览器会在纵向模式时默认使用设备宽度，当切换到横向模式时页面显示就会不正常。
（在没有设置initial-scale的横向iPhone6上的显示效果）
如图所示，当iPhone处于横向模式时，咱们看到的仍是宽度小余500px时的页面状态。不过不要慌张，咱们能够经过设置initial-scale为1来解决这个问题。
<meta name="viewport" content="width=device-width, initial-scale=1">
（在设置了initial-scale的横向iPhone6上的显示效果）
USER-SCALABLE，MAXIMUM-SCALE以及MINIMUM-SCALE
这几个参数用来控制页面的缩放能力。
- Maximum-scale：这个是用户能够缩放页面的最大比例。好比说设置为1，用户就没法缩放页面。假如设置为2，用户就能够把页面放大到1个CSS像素等于2个Viewport像素的大小；
- Minimum-scale：这个是用户能够缩放页面的最小比例。假如设置为2，页面的最小比例就是原比例的两倍，而且没法缩小到原始比例；
- User-scalable：若是设置了
user-scalable=no，用户将没法对页面进行缩放。
因为这几个参数限制了用户对页面的操做，一般不建议使用它们。
用CSS来控制Viewport
虽然如今不少人都在用viewport，但其实viewport并非HTML5标准中的正式成员。W3C目前正在研究将viewport以@viewport规则的形式加入到CSS当中，@viewport规则与viewport标签有殊途同归之妙，只是将用于布局的viewport归还给CSS，如今已经有部分开发者在尝试@viewport了。
@viewport {
zoom: 1.0; /* same as initial-scale=1 */
width: device-width;
}
/* Vendor specific prefixes */
@-ms-viewport
@-webkit-viewport
@-moz-viewport
@-o-viewport
在@viewport正式发布以前，仍是先继续使用viewport标签吧，若是有兴趣的话能够尝试一下测试版的@viewport。
总结
为了保证你的响应式页面可以在移动端正常运行，把下面这句话加到你的<head>元素里面吧~
<meta name="viewport" content="width=device-width, initial-scale=1">