viewport

背景

当我们比较移动浏览器和桌面浏览器的时候，它们最显而易见的不同就是屏幕尺寸。

为桌面浏览器所设计的网站在移动浏览器中显示的内容明显要少于在桌面浏览器中显示的；不管是对其进行缩放直到文字小得无法阅读，还是在屏幕中以合适的尺寸只显示站点中的一小部分内容。

于是，有了两个视口（layout viewport 和 visual viewport）的概念。

两个视口

把layout viewport想像成为一张不会变更大小或者形状的大图。现在想像你有一个小一些的框架，你通过它来看这张大图。这个小框架的周围被不透明的材料所环绕，这掩盖了你所有的视线，只留这张大图的一部分给你。你通过这个框架所能看到的大图的部分就是visual viewport。当你保持框架（缩小）来看整个图片的时候，你可以不用管大图，或者你可以靠近一些（放大）只看局部。你也可以改变框架的方向，但是大图（layout viewport）的大小和形状永远不会变。

元素在初始情况下使用的是 layout viewport的宽度。它的宽度有多宽？每个浏览器都不一样。Safari iPhone为980px，Opera为850px，Android WebKit为800px，最后IE为974px。

缩放的操作是改变visual viewport的尺寸，layout viewport的尺寸不变。两个viewport都是以CSS像素度量的。

度量

layout viewport

document.documentElement.clientWidth/Height

visual viewport

window.innerWidth/Height

完全支持：ios，Symbian，BlackBerry

用法

一个典型的针对移动端优化的站点包含类似下面的内容：

width属性控制视口的宽度。可以像width=600这样设为确切的像素数，或者设为device-width这一特殊值来指代比例为100%(initial-scale=1)时屏幕宽度（screen.width）的CSS像素数值。（相应有height及device-height属性，可能对包含基于视口高度调整大小及位置的元素的页面有用。）

initial-scale属性控制页面最初加载时的缩放等级。maximum-scale、minimum-scale及user-scalable属性控制允许用户以怎样的方式放大或缩小页面。

注意

但这里有一个隐情。比如Nexus One的正规宽度是480px，但是Google的工程师们觉得当使用device-width的时候，layout viewport的宽度为480px，这有些太大了。他们把宽度缩小为三分之二，所以device-width会返回给你一个320px的宽度，就像在iPhone上一样。

因为android有target-densitydpi的概念，默认值为medium-dpi。所以设置了width=device-width的meta所在的页面的layout viewport的宽默认不等于screen.width。

参考文档：MDN、A tale of two viewports、Safari Web Content Guide