viewport 就是可视窗口，有时候也可以理解成可视的区域。在桌面电脑上，viewport 就是显示内容的这个区域 ....

你可以调整窗口的大小，来改变 viewport 的尺寸 .... 如果 viewport 尺寸小于页面内容的尺寸 ...

浏览器会显示一个滚动条 .... 用户可以，上下滚动 ... 或者左右滚动 ... 来浏览页面上的内容 ...

移动

不过 viewport 在移动设备上会复杂一些 .... 我们需要考虑两个东西 ... 一个是 viewport 的尺寸 ... 还有就是缩放的级别，或者叫缩放的倍数 ...

下面我们可以使用 iOS 设备的模拟器打开同样的页面 ...

这个 iPhone 设备的宽度是 320px ，而现在显示的这个页面的宽度是 960px …

这也就是为什么会有 viewport 这个概念 .... 移动设备通常会设置一个默认的 viewport 的尺寸 .... 还有一个默认的缩放级别 ...

默认

这个 iPhone 默认的 viewport 的宽度是 980px ，配合一个默认的缩放倍数 .... 所以，这个 960px 宽的页面，会比较适当的显示在屏幕上 ....

这个默认的 viewport 设置就是为了让那些没有针对移动设备优化设计的网站，看起来也不错。

不过如果我们的设计针对移动设备做了优化 ... 比如应用了响应式设计的页面布局 ....

那这个默认的 viewport 设置就不合适了 ....

我们需要手工的去设置一下这个 viewport ....