理解视口
本文根据 Earle Castledine, Myles Eftos, and Max Wheeler 的 Understanding the Viewport 翻译，无法保证译文完全正确。
移动开发时，必须了解视口。在桌面端，视口是一个清晰的概念：它是浏览器窗口中的可视区域。在移动设备上则比较复杂，因为屏幕通常比浏览器窗口小。
在 A tale of two viewports—part two 中，Peter-Paul Koch将视口分解为两个独立的概念：视觉视口和布局视口。视觉视口是当前可见的页面的一部分，当用户滚动或缩放到页面的不同部分时，视觉视口的大小可以改变。布局视口是指实际页面的大小。
在桌面端，视觉视口和布局视口是相同的，但是在移动设备上，浏览器需要为布局视口设置一个比视觉视口大的默认值。不同设备的默认值不同：移动Safari使用980px；Opera Mini是850px；Android WebKit是800px；以及IE是974px。为什么是这些较大的值呢?如果不设置为一个较大的值，当在移动设备上浏览一个为桌面浏览器设计的网站时，布局可能会打乱，因为内容将被压缩进一个320px的窗口。通过定义一个更大的布局视口，移动浏览器会让这些站点以为屏幕有着比实际大得多的宽度。不论喜欢与否，我们生活在一个宽度固定的视口和960px的网格的时代中，所以移动浏览器需要适应桌面端。
这为移动站点带来了一个问题，因为移动站点是专门为移动设备的视口设计的：如果在一个960px或更宽的桌面浏览器中查看该站点，站点看起来就是一个被拉伸得不成比例的列。
值得庆幸的是，我们可以不被移动浏览器的这种行为所限制。使用一个meta标签，可以重写默认宽度。如果想要创建一个500px宽的站点，可以使用以下设置来使布局视口符合设计：
<meta name="viewport" content="width=500">
这很好，但这是一个勉强的例子。如果想让视觉视口和布局视口匹配呢?我们无法指定宽度，因为无法确切地知道用户设备的视觉视口有多宽。如果将viewport设置为width=320，在iPhone上我们可以得到想要的结果，但不是所有的设备都是这个宽度。幸运的是，浏览器制造商已经考虑过这个问题，并提供了一个device-width变量，我们可以使用该变量来为每个设备设置动态宽度：
<meta name="viewport" content="width=device-width">
这会把视觉视口的宽度和布局视口的宽度设置为相同的值，这样看起来就像站点针对设备进行了完美的优化。viewport元标签还允许我们控制viewport的其他方面，例如：
height
该属性设置viewport的高度，单位px。与width属性一样，可以使用device-height将其设置为屏幕高度。
initial-scale
该属性表示viewport的初始比例 —— 换句话说，屏幕的缩放级别。默认值通常为将页面的整个宽度容纳在屏幕上的值。
minimum-scale
该属性表示用户可以将viewport调整到的最小比例。在iOS中，默认为0.25，但是值可以为0到10之间的任意数。
maximum-scale
该属性表示用户可以将viewport调整到的最大缩放级别。在iOS中，默认值是1.6，但是值可以为0到10之间的任意数。
user-scalable
该属性指定是否可以让用户调整视图，即放大或缩小。默认值为yes，值为no就可以禁止缩放。
target-densitydpi
目前只有Android支持该属性，该属性可以控制目标设备的渲染分辨率。将它设置为device-dpi，可以匹配设备的屏幕密度，但这会放大或缩小CSS像素。如果正在进行独立于分辨率的样式开发，使用默认值160dpi是明智的，就像我们目前所做的那样，因此不需要指定这个值。
要更改这些属性的部分或全部，使用一个以逗号分隔值的meta标签。例如，如果想要将width设置为device-width、minimum-scale设置为0.5、maximum-scale设置为2，可以使用以下设置:
<meta name="viewport" content="width=device-width, minimum-scale=0.5, maximum-scale=2">
不是所有属性都受各移动浏览器支持，但是仍可以放心的使用。浏览器会忽略它所不能理解的属性。这是应用程序最终的viewport元标签:
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1, user-scalable=no">
我们将width设置为设备宽度，并通过设置user-scalable=no来确保用户不能缩放界面。我们使用minimum-scale=1和maximum-scale=1来代替initial-scale=1，前者受浏览器支持更好。禁用像缩放这样的功能的决定不应该被轻视，缩放是一个重要的可访问性特征，并且被很多人，甚至是大多数人使用。我们之所以这么做，是因为我们的应用程序是专门为小屏幕设计的，而且缩放比例为1时站点可用性最好。如果无法保证这点，就不要破坏用户的标准行为。
下面是关于配置viewport的进阶资料：